以下场景：
我有一个 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 状态（例如，对于 fadeIn/fadeOut 动画）。
我的问题：
DOM 重复如何处理添加或删除的元素？这个元素的信息不是全部被“删除”了吗？
如果我删除第 5 项（共 10 项），元素 6-10 会发生什么情况？它们是否会被删除并重新创建为“5-9”或“已移动/更改”？
除了 CSS 之外，模板标签内是否还有其他需要考虑的含义？我需要手动重置什么吗？
您可以阅读有关 dom-repeat 的内容https://www.polymer-project.org/1.0/docs/api/dom-repeat https://www.polymer-project.org/1.0/docs/api/dom-repeat但它基本上告诉你，它试图变得太聪明，而不询问开发人员是否想要这种行为。因此 dom-repeat 存在严重缺陷。
Polymer 正在通过脏检查来节省性能，基本上循环遍历所有内容，并且仅在检查值 (id，在本例中）发生变化。这意味着它将继承其他值。
基本上，它不会更新子属性。这意味着 dom-repeat 并不是真正为任何类型的更新而设计的。
您可以使用 Polymer 来解决这个问题this.splice()。它的工作方式类似于 javascript 中的 splice，但会向 dom-repeat 发送一个事件以进行更新以及更新位置。但请记住，Javascript 中的数组是引用，因此如果您获取 this.items 并尝试修改它，它会自动更新 dom-repeat 的值（不更新 DOM），然后它会使用新值对更新进行脏检查，根本不改变任何东西。如果你想修改dom-repeat中的数组，那么使用JSON.parse(JSON.stringify(array)首先要摆脱参考。
您可以做的另一件事是使用唯一的 id。如果该特定卡的 ID 发生更改，则硬重置所有值并使用其所有正常属性（包括 CSS）再次初始化该特定卡。这就是我一直使用的解决方法。
当没有其他办法时，最绝望的事情就是取消跟踪卡组的数组，用this.set('items', [])然后使用新数组设置属性。
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
