Question

考虑以下代码：

<template is="dom-repeat" items="{{chats}}" as="item">
    <p>{{item.name}}</p>
    <span>{{item.unreadcount}}</span>
</template>

我似乎无法确保替换数组（完全不只是更新其中一个元素的属性）更新dom。

更新我试过这样：

var c = this.chats;
c.forEach(function(e) {
    e.unreadcount = Math.floor(Math.random() * 10) + 1;
}.bind(this));

// none of the following approaches has any effect:
this.chats = c;
this.set("chats", c);
this.notifyPath("chats", c);

如果阵列完全改变，我怎样才能重新渲染dom？

修改

感谢Maria的提示，我想出了如何做到这一点。

仅使用splice()是不够的，还需要使用Polymer的函数来修改数组本身：this.set(..., ...)。

for (i = 0; i < this.chats.length; i++) { 
    this.set('chats.'+i+'.unreadcount', Math.floor(Math.random() * 10) + 1);
}
this.chats = this.chats.slice();

自从聚合物

Answer 1

这里的问题是，在所有这些操作之后，您的chats属性仍然是数组的同一个实例。在您尝试的任何方法中，Polymer检查实例是否已更改，它不会检查数组中的项目是否有更改。解决此问题的一种方法是创建数组的新副本并将其分配给chats。

this.chats = c.slice();

<强>更新

虽然我很确定上述内容曾经在某些时候起作用，但我可以确认它不再起作用了。我假设Polymer以某种方式缓存旧值。所以我认为使用set API的解决方案是现在最好的方法。我发现以下工作也是如此，但我猜它在大多数情况下效率较低。它正在重置数组，然后异步设置新值。在这种情况下，切片甚至不需要。

this.chats = [];

this.async(function() {
    this.set("chats", c);
});

更新模板dom-repeat项目中的数组未反映到dom

1 个答案: