更新陣列不會反映到DOM

Question

考慮以下代碼：

<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(); 

我的額頭開始，因爲與聚合物開始，由於我的頭撞在牆上的大規模撞壓平

Answer 1

這裏的問題是，所有這些操作後，您chats財產仍然是相同的數組的實例。在你嘗試的任何方法中，Polymer檢查實例是否發生了變化，它不檢查數組中的項目是否有變化。解決此問題的一種方法是創建陣列的新副本並將其分配給chats。

this.chats = c.slice(); 

更新

雖然我敢肯定，用來在某些時候工作上面，我可以證實，它不工作了。我認爲聚合物具有以某種方式緩存的舊值。所以我認爲你的解決方案與set API是現在最好的方法。我發現以下工作也是如此，但我猜測它在大多數情況下效率較低。它將重置數組，然後異步設置新值。在這種情況下，切片甚至不需要。

this.chats = []; 

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