更新阵列不会反映到DOM

考虑以下代码：更新阵列不会反映到DOM

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

我似乎无法确保更换阵列（完全，不只是更新一个的属性的元素）更新dom。

Updating（升级）我想是这样的：

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？

编辑

感谢玛丽亚暗示我想通了，如何做到这一点。

仅使用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();

我的额头开始，因为与聚合物开始，由于我的头撞在墙上的大规模撞压平

来源

2017-02-19 yglodt

如果你用'this.set'完成所有的操作，你就不需要'this.chats = this.chats.slice（）;'。试图删除它，并检查它是否仍然有效？ – Maria

这里的问题是，所有这些操作后，您chats财产仍然是相同的数组的实例。在你尝试的任何方法中，Polymer检查实例是否发生了变化，它不检查数组中的项目是否有变化。解决此问题的一种方法是创建阵列的新副本并将其分配给chats。

this.chats = c.slice();

更新

虽然我敢肯定，用来在某些时候工作上面，我可以证实，它不工作了。我认为聚合物具有以某种方式缓存的旧值。所以我认为你的解决方案与set API是现在最好的方法。我发现以下工作也是如此，但我猜测它在大多数情况下效率较低。它将重置数组，然后异步设置新值。在这种情况下，切片甚至不需要。

this.chats = []; 

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

来源

2017-02-20 06:35:08 Maria

感谢您的回答。这已经是一个改进:-)如果在做这个之前，chats = slice（c）;我向数组中添加另一个元素（c.push（{...}）），它现在显示在dom中。然而，在数组中的对象的属性的变化仍然没有反映在dom :-( – yglodt

嗨，谢谢你的更新。很遗憾，使用slice（）不再工作。因为它现在需要一些摆弄从我的后端得到一个新的数组，以让dom知道它:) – yglodt

我可以证实它的工作原理，现在不调用slice（）现在 – yglodt

更新阵列不会反映到DOM

回答

相关问题