使用新數據完全重置dom-repeat元素

Question

<dom-repeat>偶爾會嘗試變得比自己需要的聰明，這會導致屬性綁定問題，導致回收的元素顯示陳舊或重復的數據。

不管您嘗試多少this.splice()或this.push()它的效果似乎都比浪費周期多，因為它的效果為零。

在這一點上，做任何文檔告訴您的事情-等於是試圖找出奧秘綁定到子屬性和子數組的正確組合，以及觀察者觸發的變能器使黑魔法起作用，似乎浪費了努力，擦拭石板並從新狀態重建元素會更快，更輕松。 那么如何才能做到這一點呢？

Answer 1

盡管此主題以前沒有答案，但事實證明，重置<dom-repeat>非常容易。 只需將<dom-repeat>包裝在與reset屬性綁定的<dom-if>中，該屬性可以根據需要自由地用於殺死和重建<dom-repeat> 。

首先，我們定義需要重置的數據。

<iron-ajax id="retrieveData"
           method="get"
           url="/api/data"
           handle-as="json"
           on-response="_handleData">
</iron-ajax>
<template is="dom-if" if="[[!_reset]]">
  <template is="dom-repeat" items="[[veryComplicatedObjects]]">
    <my-complicated-custom-element content={{item}} on-change="_remoteChanged"/>
  </template>
</template>

現在我們編寫事件處理程序

_remoteChanged() {
  // trigger retrieval of new data
  this.$.retrieveData.generateRequest()
}

_handleData(e) {
  // kill dom-repeat
  this.setProperties({
    veryComplicatedObjects: []
  })
  this._reset = true

  // reconstruct dom-repeat
  this.setProperties({
    veryComplicatedObjects: e.detail.response
  })
  this._reset = false
}