聚合物自定义元素观察器开火过早

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 执行各种操作。这需要在模板 "rendered" 之后被调用以反映更新的 MyItems 集合。

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

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

Answer 1

您可以监听模板的 dom-change 事件 (docs)

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

Answer 2

您可以在准备好的方法中设置一个标志来测试：

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

您还可以利用 DOMContentLoaded 事件：

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

聚合物自定义元素观察器开火过早

Polymer custom element observer firing too early

html

javascript

dom

polymer

polymer-1.0