从 Polymer 0.5 迁移到 1.0 后属性更改时 DOM 不会更新

Question

我正在使用dom-repeat 来填充表格的行，因此：

<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>

getPropertyByName() 函数仅取消对行的引用：

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

在升级到 1.0 之前，该函数不是必需的，因为我们可以直接取消引用，即 content="{{row[header.name]}}"。

我们有一个表格排序功能，通过点击表格标题触发，在升级到1.0之前，表格行中{{list}}的数据绑定意味着在我们的JS函数中对this.list的元素进行排序导致表格行在 DOM 中移动。由于 Polymer 1.0 不能以这种方式工作，我不确定我应该如何提醒 Polymer 该属性已更改，我尝试在排序后使用this.set('this.list.0', this.list[0]);，这是我从here 得到的一个想法，但这并没有为我工作。在 JS 中对我的数据绑定属性进行排序后，如何让 Polymer 更改 DOM？

提前致谢！

Answer 1

要触发刷新，您可以在模板上调用 render()。

this.$.templateID.render();

Answer 2

dom-repeat 内置了对排序的支持，这里有文档https://www.polymer-project.org/1.0/docs/devguide/templates.html#filtering-and-sorting-lists。

基本上，您可以将sort 函数（与您为Array.sort 提供的函数类型相同）附加到模板。

另外，您可以在模板上调用render() 来强制重新渲染。