如何判断dom重复何时完成冲压元素

问题描述：

在聚合物中，dom-repeat模板帮助程序每当将迭代结果标记到DOM中时都会发出dom-change事件。有没有办法让我知道所有迭代完成的时间？如何判断dom重复何时完成冲压元素

是否有可能通过查看dom变更事件中的数据来确定此事 - 知道哪些数据项应该是最后的，然后检查该数据？然而，也许不是理想的解决方案。 – newfivefour

https://github.com/Polymer/polymer/blob/master/src/lib/template/dom-repeat.html @ 348它在render（） –

结束时触发了一个事件，正如Robert在'dom当“dom-repeat”模板的渲染完成时，会触发-change'事件。然后，您应该能够添加到您的模板中，以下代码行将在该事件被触发时执行一个函数：'

答

也许这个简单的例子可以帮助解释行为并扩展评论。

<dom-module id="change-tester"> 
    <template> 
    <h1>Change Tester</h1> 
     <ul> 
     <template id="template" is="dom-repeat" items="{{content}}"> 
      <li>{{item}}</li> 
     </template> 
     </ul> 
     <button on-click="more">Add more</button> 
    </template> 
</dom-module> 
<script> 
    Polymer({ 

     is: 'change-tester', 
     properties: { 
      content: { 
       type: Array, 
       value: function(){ return ["one", "two", "three"]} 
      } 
     }, 
     ready: function(){ 
      this.$.template.addEventListener("dom-change", function(event){ 
       console.log(event); 
      }); 
     }, 

     more: function(){ 
      this.push("content", "four"); 
      this.push("content", "five"); 
     } 
    }); 
</script>

每当dom-change被激发，我记录事件到控制台，所以打开开发者工具，看一看。最初，dom-repeat有三个迭代，并将用三个元素填充dom。请注意，只有一个事件会触发，即所有三个元素都已添加。如果您点击该按钮，则会在重复内容中添加两个项目。由于dom-repeat异步更新，这两个项目再一次处理，只会触发一个事件。

因此dom-change事件实际上是您正在寻找的最终事件。如果您操作与其绑定的物品，它只会再次触发。

答

要访问动态创建的节点（如模板重复）使用：。

这$$（ '＃ID'）

这个$，而不是ID

例如，如果模板ID为 “模板”，你应该使用

这一点。$$（ '＃模板'）

ready: function(){ 
    this.$$('#template').addEventListener("dom-change", function(event){ 
     console.log(event); 
    }); 
},

如何判断dom重复何时完成冲压元素

相关推荐