聚合物 - dom-repeat＆amp;在DOM树中缓存元素数据

Question

以下场景： 我有一个Firebase数据库，其中包含一个列表，用于创建一组带有dom-repeat的“纸卡”：

<template is="dom-repeat" items="{{items}}">
  <my-element card="{{item}}">
      <paper-card id="{{card.id}}">
          ...
      </paper-card>
  </my-element>
</template>

在用户界面中，用户可以添加或删除纸质卡片，因此Firebase中的项目也会被删除。

现在我意识到如果我改变一个元素的CSS（例如fadeIn，fadeOut动画），然后删除一张卡片然后添加一张卡片，该卡片仍然具有之前的CSS状态（例如fadeIn / fadeOut动画） ）。

我的问题：

1. DOM如何重复处理添加或删除的元素？这个元素的所有信息都没有“删除”吗？

2. 如果删除第5项（10个中的第6个），元素6-10会发生什么，它们是否被删除并重新创建为“5-9”或“移动/更改”？

3. 除了CSS之外，模板标签内是否还有其他含义？我需要手动重置任何内容吗？

Answer 1

转发器在初始化时评估数组中的项目数，并将许多模板实例标记到DOM中。如果从数组中删除一个项目，则会向转发器显示一个新元素，该数组少一个元素，删除最后一个并将数据更改传播到元素＆＃39;实例

因此，如果您从10个元素开始并命令删除＃5，那么元素的＃6数据将通过数据绑定插入到先前包含＃5数据的同一DOM节点中，依此类推。更新后的数组不包含任何数据的最后一个DOM节点将从DOM树中删除。

Answer 2

你可以在https://www.polymer-project.org/1.0/docs/api/dom-repeat上阅读有关dom-repeat的内容，但它基本上告诉你它在没有询问开发者是否想要这种行为的情况下试图过于聪明。由于这个原因，dom-repeat存在严重缺陷。

Polymer正在保持执行脏检查的性能，基本上循环遍历所有内容，只有在检查的值（在这种情况下为id）发生更改时才更改DOM。这意味着它将继承其他值。

基本上，它不会更新子属性。这意味着dom-repeat并不是真正适用于任何类型的更新。

您可以使用Polymer this.splice()解决此问题。它的工作方式类似于javascript中的拼接，但是发送一个事件来重复更新以及更新的位置。但请记住，Javascript中的数组是引用，所以如果你使用this.items并尝试修改它，它会自动更新dom-repeat（不更新DOM）的值，然后它将使用新值和脏检查更新根本不改变任何东西。如果要在dom-repeat中修改数组，请先使用JSON.parse(JSON.stringify(array)删除引用。

您可以做的另一件事是使用唯一ID。如果该特定卡的ID发生更改，则硬重置所有值并使用其所有正常属性（包括CSS）再次初始化该特定卡。这是我一直使用的解决方法。

当没有其他工作时，绝望的事情是使用this.set('items', [])使跟踪卡集的数组无效，然后使用新数组设置属性。