Polymer2：数组元素的更新视图，通过 dom repeat 生成

Question

我有一组对象，它们通过 dom-repeat 创建它们的视图。 在此视图中，我有一个按钮可增加数组元素的属性。 但此后视图不会刷新。 是他们通知polymer2更新的一种方式：

这是一些代码：

        <template id="filterElementList" is="dom-repeat" items="{{filterElements}}">
            <div style="display: flex;">
                <filter-panel-element style$="margin-left: {{_computeLevel(item.level)}}px;"></filter-panel-element>
                <i class="fa fa-arrow-circle-left" aria-hidden="true" on-click="_decreaseLevel"></i>
                <i class="fa fa-arrow-circle-right" aria-hidden="true" on-click="_increaseLevel"></i>
            </div>
        </template>

JS：

        _increaseLevel: function (e) {
            e.model.item.level++;
        },

我更新了元素的 level 属性，但视图没有更新。

Answer 1

因此，考虑到您的模板绑定到filterElements并且您正在尝试增加array item的子属性，

您可能必须在更新元素的数组的属性和/或子属性时指定data.path 。

所以试试这个：

• e.model.set('item.level',e.model.item.level+1)

Polymer 在他们的数据系统文档中记录了这一点，它帮助 Polymer 传播事件通知并观察数据突变。

如果您可以使用数组和元素创建一个 plunk，则进一步排除故障会更容易。

以防万一，对您的代码进行上述更改，不会达到预期的结果