在聚合物中,每当dom-repeat
模板助手将迭代结果标记到DOM中时,它就会发出一个dom-change
事件。有什么方法让我知道什么时候所有的迭代都完成了吗?
发布于 2015-09-07 04:41:23
也许这个简单的例子可以帮助解释行为并扩展到评论中。
<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
时,我都会将事件记录到控制台,因此打开dev工具并查看。最初,dom-repeat
有三个迭代,并将使用三个元素填充dom。请注意,只有一个事件会触发,即添加了所有三个元素。如果单击该按钮,将向“重复”中的内容再添加两个项。当dom-repeat
异步更新时,这两个项将在一次执行中再次处理,并且只触发一个事件。
因此,dom-change
事件实际上是您要寻找的最后一个事件。只有在您操作绑定到它的项目时,它才会再次触发。
发布于 2016-12-21 07:08:21
若要访问高分子1.x中动态创建的节点(如模板重复),请使用:
this.$$('#id')
用于聚合物2.x:
this.shadowRoot.getElementById('id');
而不是this.$.id
例如,如果模板id
是template
,则应使用
this.$$('#template')
示例
ready: function(){
this.$$('#template').addEventListener("dom-change", function(event){
console.log(event);
});
},
https://stackoverflow.com/questions/32425864
复制