使用新数据完全重置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
}