Polymer custom element observer firing too early

0
votes

I have a Polymer 1.0 custom element which specifies a property named MyItems and an observer _myItemsChanged on this property: 

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

            properties: {

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

The template for the custom element includes a dom-repeat which builds up the DOM based on the items in MyItems property:

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

The _myItemsChanged observer performs various manipulations of the DOM. This needs to get called after the template has been "rendered" to reflect the updated MyItems collection.

The issue I'm encountering is that when the _myItemsChanged is called, the DOM for the template has not yet been updated. I can get around this by including a timeout to delay the _myItemsChanged call but this is more of a hack and not really a workable solution.

How can I ensure that the observer function gets called only once the template has completed rendering?

2
javascripthtmldompolymerpolymer-1.0

2 Answers

0
votes

You could listen to the dom-change event of the template (docs)

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

You could set a flag inside your ready method to test against:

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

You could also utilize the DOMContentLoaded event:

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