Javascript 如何判断何时在元素上标记dom repeat

在Polymer中，

dom repeat

template辅助程序每当将迭代结果标记到dom中时，就会发出一个

domchange

事件。有没有办法告诉我所有迭代何时完成？

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

<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>

变化测试仪

{{item}}

添加更多
聚合物({
是：“变更测试者”，
特性：{
内容：{
类型：数组，
值：函数（）{return[“一”、“二”、“三”]}
}
},
就绪：函数（）{
此.$.template.addEventListener（“dom更改”，函数（事件）{
console.log（事件）；
});
},
更多：函数（）{
这个。推（“内容”、“四”）；
本次推送（“内容”、“五”）；
}
});

每当触发

domchange

时，我都会将事件记录到控制台，因此打开开发工具并查看一下。最初，

dom repeat

有三次迭代，将用三个元素填充dom。请注意，只有一个事件将触发，即当所有三个元素都已添加时。如果单击该按钮，将向“重复”中的内容添加另外两个项目。当

dom repeat

异步更新时，这两个项目将再次一次性处理，并且只会触发一个事件

---

因此，

domchange

事件实际上就是您要查找的最后一个事件。如果您操作绑定到它的项目，它只会再次启动。

访问Polymer 1.x中动态创建的节点（如模板重复） 使用：

对于聚合物2.x，使用：

this.shadowRoot.getElementById('id');

而不是

this.$.id

例如，如果模板

id

为

template

，则应使用

this.$$('#template')

例子

---

可以通过查看dom更改事件中的数据来确定这一点吗？知道什么数据项应该是最后一个，然后检查它？然而，也许不是理想的解决方案@348它在渲染结束时触发一个事件（），正如Robert在上面所说，

dom更改

事件是在

dom重复

模板的渲染完成时触发的。然后，您应该能够将以下代码行添加到模板中，当触发此事件时，这些代码将执行一个函数：

如何区分最终的

dom更改

事件与其他事件？

this.$$('#template')

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