DOM doesn't update when property changes after migrating from Polymer 0.5 to 1.0

Question

I'm using dom-repeat to fill in the rows of a table, thusly:

<tbody>
    <template is="dom-repeat" items="{{list}}" as="row">
        <tr>
            <template is="dom-repeat" items="{{headers}}" as="header">
                <td><template is="juicy-html" content$="{{getPropertyByName(row, header.name)}}"></template></td>
            </template>     
        </tr>   
    </template>
</tbody>

where the getPropertyByName() function merely dereferences the row:

getPropertyByName: function (listObj, name) {
                    return listObj[name];
}

Before upgrading to 1.0, the function wasn't necessary as we could simply dereference directly, i.e. content="{{row[header.name]}}".

We have a sort feature for the table which is triggered by clicking the table header, and prior to upgrading to 1.0 the data binding of {{list}} in the table row meant that sorting the elements of this.list in our JS function resulted in table rows moving in the DOM. Since Polymer 1.0 doesn't work that way, I'm not sure how I should alert Polymer that the property has changed, I tried using this.set('this.list.0', this.list[0]); following the sort, an idea I got from here, but that didn't work for me. How can I get Polymer to change the DOM after sorting my data-bound property in JS?

Thanks in advance!

Answer 1

dom-repeat has built-in support for sorting, there is documentation here https://www.polymer-project.org/1.0/docs/devguide/templates.html#filtering-and-sorting-lists.

Basically you can attach a sort function (the same kind of function you would supply for Array.sort) to the template.

Also, you can call render() on the template to force a re-render.

Answer 2

To trigger a refresh you can call render() on the template.

this.$.templateID.render();