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

【问题标题】：Polymer2: Update view of array element, generated via dom repeatPolymer2：数组元素的更新视图，通过 dom repeat 生成
【发布时间】：2017-08-15 16:48:39
【问题描述】：

我有一个对象数组，它们通过 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属性，但是视图没有更新。

【问题讨论】：

你能用各自的元素创建一个 plunk 吗？

标签： javascript data-binding polymer-2.x

【解决方案1】：

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

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

所以试试这个：

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

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

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

即以防万一，对您的代码进行上述更改，并没有达到预期的结果

【讨论】：

e.model.set('item.level',e.model.item.level+1);完美运行