聚合物-dom-repeat&在DOM树中缓存元素数据 [英] Polymer - dom-repeat & caching of element data in DOM tree

问题描述

以下情况: 我有一个Firebase数据库，其中包含一个列表，该列表用于使用dom-repeat:

following scenario: I have a Firebase database containing a list that is used to create a set of "paper-cards" with dom-repeat:

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

在用户界面中，用户可以添加或删除纸卡，因此项目也可以在Firebase中删除.

In the UI, the user can add or delete paper-cards, so items also get deleted in Firebase.

现在，我意识到，如果我更改元素的CSS(例如，fadeIn，fadeOut动画)，然后删除卡，然后再添加一张卡，则该卡仍具有与以前一样的CSS状态(例如，对于fadingIn/fadeOut动画) ).

Now I realized if I change the CSS of an element (e.g. fadeIn, fadeOut animation) and afterwards delete a card and later add one card, the card still has the CSS state as it was before (e.g. for fadeIn/fadeOut animations).

我的问题:

1. DOM如何重复处理添加或删除的元素?并非此元素的所有信息都被删除"了吗?

1. How does DOM repeat deal with elements added or removed? Is not all information of this element "deleted"?

如果我删除第5项(共10项)，则元素6-10会发生什么，它们是否被删除并重新创建为"5-9"或移动/更改"?

If I delete item #5 (out of 10), what happens to elements 6-10, are they deleted and re-created as "5-9" or "moved/altered"?

除了CSS之外，模板标记内还应考虑其他含义吗?我需要手动重置任何内容吗?

Besides CSS, are there any other implications that should be considered inside the template tag? Do I need to manually reset anything?

推荐答案

您可以在

You can read about the dom-repeat on https://www.polymer-project.org/1.0/docs/api/dom-repeat but what it basically tells you that it tries to be too smart without asking the developer if it wants that behavior. The dom-repeat is heavily flawed because of this.

聚合物可以节省执行脏检查的性能，基本上可以遍历所有内容，并且仅在检查值(在本例中为id)更改时才更改DOM.这意味着它将继承其他值.

Polymer is saving performance to doing a dirty check, basically looping through everything and only changing the DOM if the checked values (id, in this case) changes. This means that it will inherit other values.

基本上，它不会更新子属性.这意味着dom-repeat并不是针对任何更新进行的.

Basically, it wont update sub-properties. This means that dom-repeat isn't really made for any kind of update.

您可以使用Polymer的this.splice()解决此问题.它的工作方式类似于javascript中的拼接，但向dom-repeat发送事件以进行更新以及在何处进行更新.但是请记住，Javascript中的数组是引用，因此，如果您使用this.items并尝试对其进行修改，它将自动更新dom-repeat值(不更新DOM)，然后将使用新值和更新来检查更新.根本不改变任何东西.如果要修改dom-repeat中的数组，请先使用JSON.parse(JSON.stringify(array)摆脱引用.

You can possibly go around this issue by using Polymer's this.splice(). It works like the splice in javascript but sends out an event to dom-repeat to update and where to update. Remember however, that arrays in Javascript are references, so if you take this.items and try to modify it, it will automatically update values the dom-repeat (without updating DOM) and then it will dirty check the update with the new values and not change anything at all. If you want to modify the array in the dom-repeat, then use JSON.parse(JSON.stringify(array) first to get rid of the reference.

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

Another thing you can do is to use the unique id. If the id changes for that specific card, then hard reset all values and initialize that specific card once again with all it's normal properties (including CSS). That's the workaround I use all the time.

在无法执行其他任何操作的情况下，最需要采取的措施是使用this.set('items', [])取消跟踪卡集的数组，然后使用新数组设置属性.

The desperate thing to do, when nothing else works, is to nullify the array that keeps track of the cardset, with this.set('items', []) and then set the property with the new array.

这篇关于聚合物-dom-repeat&在DOM树中缓存元素数据的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！