DOM 在从 Polymer 0.5 迁移到 1.0 后属性发生变化时不会更新

Question

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

<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]}}"。

我们有 table 的排序功能，通过单击 table header 触发，在升级到 1.0 之前，{{list}} 的数据绑定在table 行意味着在我们的 JS 函数中对 this.list 的元素进行排序导致 table 行在 DOM 中移动。由于 Polymer 1.0 不是那样工作的，我不确定我应该如何提醒 Polymer 属性已更改，我尝试在排序后使用 this.set('this.list.0', this.list[0]);，这是我从 [=20 得到的想法=]，但这对我不起作用。在 JS 中对 data-bound 属性进行排序后，如何让 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() 以强制重新渲染。

DOM 在从 Polymer 0.5 迁移到 1.0 后属性发生变化时不会更新

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

data-binding

dom-manipulation

polymer

polymer-1.0

DOM 在从 Polymer 0.5 迁移到 1.0 后 属性 发生变化时不会更新

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

data-binding

dom-manipulation

polymer

polymer-1.0

DOM 在从 Polymer 0.5 迁移到 1.0 后属性发生变化时不会更新