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

Question

在Polymer中,只要将迭代结果标记到DOM中,dom-repeat模板助手就会发出一个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事件实际上是你正在寻找的最后一个事件.如果你操纵绑定它的项目,它将只会再次触发.