javascript - 使用新数据完全重置 dom-repeat 元素

Question

每隔一段时间，<dom-repeat>试图变得比实际需要更聪明的倾向会导致属性绑定(bind)出现问题，导致回收的元素显示陈旧或重复的数据。

无论多少this.splice() ing 或 this.push()当你尝试时，它似乎除了废物循环外没有什么作用，因为它的影响为零。

此时，执行文档告诉您要做的任何操作 - 这相当于尝试找出子属性和子数组的神秘绑定(bind)的正确组合，以及观察者触发更改器(mutator)以使黑魔法发挥作用 - 看起来就像这是浪费精力，而且删除石板并从新状态重建元素会更快更容易。那么如何才能实现这一点呢？

Answer 1

尽管之前在这个问题上缺乏答案，但事实证明，重置<dom-repeat>是很容易的。只需将 <dom-repeat> 包裹起来即可在 <dom-if>它绑定(bind)到 reset属性，可以自由地用于杀死和重建 <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
}