聚合物立即髒檢查和分配後執行完整的DOM重複

我有一個包含子屬性的數組，子屬性又是對象和子數組。聚合物立即髒檢查和分配後執行完整的DOM重複

當我從服務器獲取API響應時，我用來顯示使用dom-repeat的情況，當我得到另一個具有相同格式的API響應時，它的值有小的變化，我將用新的用髒檢查陣列狀

<template is="dom-repeat" items="{{arr}}"> 
//paper list codes for display 
</temlate> 

    this.arr = []; 
    this.arr = newArrayFromResponse;

，但是當我這樣做只是一些紙張名單將更新其值改變， DOM重複不會創建所有的節點，它只會更新其值已改變的節點。

當我只是清除數組this.arr = [];在這種情況下，它將銷燬所有節點，但是如果我立即再次重新分配，它只會更新節點。

如何清除所有節點並從頭開始執行dom-repeat？我試過聚合物陣列突變和渲染（）功能，並認爲https://github.com/Polymer/polymer/issues/4041沒有工作！每次。

我需要呈現DOM重複類似的方式像它的渲染，第一次，就像一個空白的屏幕和即時渲染

來源

2017-04-06 Karthik Hande

預期結果是什麼？你爲什麼不使用聚合物陣列突變？當你使用this.set（'arr'，null），然後this.set（'arr'，newArrayFromResponse）它應該工作。至少在我的項目中，我正在做它，一切都很好（節點完全從HTML中刪除）。我沒有明白這一點。 –

假設你有10個使用dom-repeat生成的列表，那麼假設下一次只有3個列表值被改變，那麼在這種情況下，它只會通過保留所有其他列表來更新3列表。我想要的是，當我骯髒的檢查它應該清空所有的節點像空屏幕幾分之一秒，再次重新生成所有10個節點作爲新鮮的副本 –

我認爲高分子檢測到一些值沒有改變，有一些性能優化發生。您可以嘗試異步設置新值。

this.arr = []; 

this.async(function() { 
    this.arr = newArrayFromResponse; 
});

爲什麼這個工作和你的代碼不？要確切地知道，我們需要查看Polymer代碼。我的猜測是聚合物在每次分配到this.arr後都不會立即更新DOM，但稍後會稍微更新。當它更新時，在您的解決方案中this.arr = newArrayFromResponse已經發生並且空數組永遠不會呈現。聚合物可能仍然有一箇舊數組的副本，並意識到它是與一些新項目相同的數組，只是添加了新項目。我的解決方案引入了很小的延遲所以Polymer會渲染空的數組，然後才渲染新的數組。

來源

2017-04-06 14:19:31 Maria

謝謝姐姐！這工作得很好.. –

它實際上在做什麼？這是如何工作的？假設我有一長串100個節點需要一段時間才能加載，你知道任何優化技術嗎？ –

我試圖解釋我認爲正在發生的事情。對於100個節點來說，讓Polymer進行優化可能會更好，但是它不會清除所有像你想要的節點 – Maria

聚合物立即髒檢查和分配後執行完整的DOM重複

回答

相關問題