How to access DOM elements via JS after a template is resolved?

[javier.ve...@gmail.com]

I need to access via JS  all the elements stated by a template after it has been resolved. For instance, let's suppose we have this simple iterative template expanding a collection of items.  

<ul id="menu">

    <template repeat="{{ item in items }}">

        <li>{{item}}</li>

    </template>

</ul>

When the template has been resolved, a fresh set of DOM nodes would appear:

<ul id="menu">

   <li> item 1 </li>

   <li> item 2 </li> 

   <li> item 3 </li> 

</ul>

Then, I need to access each of these nodes in order to add some cool JQuery effects. To do that, I have used a naive approach including the following code at the end of the ready lifecycle method: 

var children = this.$.menu.children;

console.log ('children: ', children); // (1)

for(var i = 0; i < children.length; i++) {

   var child = children[i];

   (function (element) {

... // Adding JQuery effects

    }.bind(this))(child);

}

As it hints the console.log in (1) this code does not operate over the set of resolved nodes but on the unresolved template. That is, children variable holds a single "template" node (children.impl === template). So, my question is how can I get the elements once the template has been resolved? Is it a problem of my code or an issue about its location within the lifecycle? In any case, how can I fix it?

Thanks in advance,

Javier.

[Eric Bidelman]

Javier, mind posting this on Stack Overflow and posting a link?

Follow Polymer on Google+: plus.google.com/107187849809354688692
---
You received this message because you are subscribed to the Google Groups "Polymer" group.
To unsubscribe from this group and stop receiving emails from it, send an email to polymer-dev...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/polymer-dev/1bcf617b-447a-4d37-8f6e-ff9896864b37%40googlegroups.com.
For more options, visit https://groups.google.com/groups/opt_out.

[Steve Orvell]

Data propagation is asynchronous in Polymer and therefore so is template stamping. In this case, we want to respond to an explicit signal that the template has stamped. We're investigating adding direct support for this, but right now we typically use a mutation observer. Polymer provides a helper method for this.

So, you might do something like this:

ready: function() {

  this.onMutation(this.$.menu, function(mxns) {

    // the menu's children should be there now... you'll need to filter out the template element.

  });

}

The onMutation method looks for exactly 1 mutation to the childList rooted at the first argument. If you need something more fancy, I recommend using MutationObservers directly.

Hope that helps.

To view this discussion on the web visit https://groups.google.com/d/msgid/polymer-dev/CACGqRCDAh9NKo-FPAzBCjOyECxHYU-AST7avvd42fo8wMs0GKQ%40mail.gmail.com.