CODEWITHSUNDEEP
javascripthtmldompolymerpolymer-1.0
aw1975
aw1975

Reputation: 253

Polymer custom element observer firing too early

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?

Upvotes: 0

Views: 749

Answers (2)

Devappended
Devappended

Reputation: 104

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");
});

Upvotes: 0

Maria
Maria

Reputation: 5604

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

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

Upvotes: 0

Related Questions