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.
On Wed, Feb 19, 2014 at 10:41 AM, Eric Bidelman <[email protected]> wrote:
> Javier, mind posting this on Stack Overflow and posting a link?
>
>
> On Wed, Feb 19, 2014 at 10:06 AM, <[email protected]> wrote:
>
>> 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.
>>
>> 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 [email protected].
>> 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.
>>
>
> 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 [email protected].
> To view this discussion on the web visit
> https://groups.google.com/d/msgid/polymer-dev/CACGqRCDAh9NKo-FPAzBCjOyECxHYU-AST7avvd42fo8wMs0GKQ%40mail.gmail.com
> .
>
> For more options, visit https://groups.google.com/groups/opt_out.
>
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 [email protected].
To view this discussion on the web visit
https://groups.google.com/d/msgid/polymer-dev/CA%2BrMWZj%3DPjppkQqh_uN_AkxXYwqvOHw4vnAAndWEnaZ1r7Driw%40mail.gmail.com.
For more options, visit https://groups.google.com/groups/opt_out.
