Question

我有一个Polymer 1.0自定义元素，它在此属性上指定名为MyItems的属性和一个观察者_myItemsChanged：

       Polymer({
            is: 'my-custom-element',

            properties: {

                MyItems: {
                    type: Object,
                    observer: '_myItemsChanged'
                },

自定义元素的模板包含dom-repeat，它根据MyItems属性中的项构建DOM：

<template is="dom-repeat" items="{{MyItems}}">
    ...
</template>

_myItemsChanged观察者对DOM进行各种操作。在模板被“渲染”以反映更新的MyItems集合之后，需要调用它。

我遇到的问题是，当调用_myItemsChanged时，模板的DOM尚未更新。我可以通过包括超时延迟_myItemsChanged调用来解决这个问题，但这更像是一个黑客而不是一个可行的解决方案。

如何确保只在模板完成渲染后才调用观察者函数？

Answer 1

您可以收听模板的dom-change事件（docs）

<template is="dom-repeat" items="{{MyItems}}" on-dom-change="myEventHandler">

Answer 2

你可以在ready方法中设置一个标志来测试：

ready: function() {
    this.domready = true;
}

您还可以使用DOMContentLoaded事件：

document.addEventListener("DOMContentLoaded", function(event) {
    console.log("DOM fully loaded and parsed");
});

聚合物自定义元素观察者过早发射

2 个答案: