3

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

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

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

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

我的问题：

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

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

  3. 除了 CSS 之外，在模板标签中是否还有其他需要考虑的含义？我需要手动重置什么吗？

在此处输入图像描述

4

2 回答 2

3

您可以在https://www.polymer-project.org/1.0/docs/api/dom-repeat上阅读有关 dom-repeat 的信息，但它基本上告诉您它试图变得太聪明而无需询问开发人员是否想要这种行为。因此，dom-repeat 存在严重缺陷。

Polymer 节省了执行脏检查的性能，基本上循环遍历所有内容，并且仅在检查的值（id在本例中为 ）更改时才更改 DOM。这意味着它将继承其他值。

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

您可以使用 Polymer 的this.splice(). 它的工作方式类似于 javascript 中的拼接，但会向 dom-repeat 发送一个事件以进行更新以及更新的位置。但是请记住，Javascript 中的数组是引用，因此如果您使用 this.items 并尝试修改它，它会自动更新 dom-repeat 的值（不更新 DOM），然后它会用新值检查更新并根本不改变任何东西。如果要修改 dom-repeat 中的数组，则使用JSON.parse(JSON.stringify(array)first 摆脱引用。

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

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

于 2018-01-14T09:15:09.993 回答
1

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

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

于 2018-01-08T17:23:50.667 回答