更新陣列不會反映到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

回答

相關問題