Question

在Polymer中，dom-repeat模板助手只要将迭代结果标记到DOM中，就会发出dom-change事件。有没有办法让我知道所有迭代何时完成？

Answer 1

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

<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事件实际上是您正在寻找的最终事件。如果你操纵绑定它的项目，它将只会再次触发。

Answer 2

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

this.$$('#id')

而不是this.$.id

例如，如果模板id为template，则应使用

this.$$('#template')

例

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

如何判断dom-repeat是否完成了冲压元素

2 个答案: