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

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++;
        },

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

Answer 1

因此，考虑到您的模板已绑定到 filterElements，并且您正在尝试在 array、[=15= 中增加 item 的子属性 ]

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

所以试试这个：

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

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

如果你能用你的数组和元素创建一个 plunk，那么进一步排除故障会更容易。

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

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

Polymer2: Update view of array element, generated via dom repeat

javascript

data-binding

polymer-2.x