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}}的数据绑定意味着对this.list的元素进行排序在我们的JS函数中导致表行在DOM中移动。由于Polymer 1.0不能以这种方式工作，我不确定如何提醒Polymer应该更改属性，我尝试在排序后使用this.set('this.list.0', this.list[0]);，这是我从here获得的一个想法，但是这对我不起作用。在JS中对数据绑定属性进行排序后，如何让Polymer更改DOM？

提前致谢！

Answer 1

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

javascript

Answer 2

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

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

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

从Polymer 0.5迁移到1.0

2 个答案: