聚合物自定义元素观察器触发太早答案

【问题标题】：Polymer custom element observer firing too early聚合物自定义元素观察器触发太早
【发布时间】：2015-09-15 16:50:23
【问题描述】：

我有一个 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 调用来解决这个问题，但这更像是一种技巧，而不是真正可行的解决方案。

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

【问题讨论】：

标签： javascript html dom polymer polymer-1.0

【解决方案1】：

你可以监听模板的dom-change事件（docs）

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

【讨论】：

【解决方案2】：

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

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

您也可以利用 DOMContentLoaded 事件：

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

【讨论】：