Let's say I've defined two custom Polymer elements
<!-- Define inner elements -->
<polymer-element name="child-el" attributes="foo">
<script>
Polymer('child-el', {
/* -- Attributes ------------------------------------------------ */
foo: 'qux'
/* -- Lifecycle ------------------------------------------------- */
created: function() {
console.log('Creating a Child');
},
/* -- Public Methods -------------------------------------------- */
getFoo: function() {
return [this.foo];
}
});
</script>
</polymer-element>
<!-- Define custom element -->
<polymer-element name="parent-el">
<script>
Polymer('parent-el', {
/* -- Lifecycle ------------------------------------------------- */
created: function() {
console.log('Creating a Container');
},
ready: function() {
// This is the part that doesn't seem to work
console.log(this.children[0].getFoo());
}
});
</script>
</polymer-element>
And then in the markup which uses these elements:
<container>
<child foo="bar"></child>
<child foo="baz"></child>
</container>
As I've commented in the code I'd like to use the methods and/or attributes of the custom element child nodes of the custom element (not the child nodes of a template). Naturally, I'm aware there will be more than simply looping through an array, but at this point I'm not entirely sure how to essentially access each of the custom children as their Polymer types.
I hope that makes sense.
Thanks!
After an answer and brief discussion with @ebidel I came up with the full solution to my problem. Basically, I wanted to access child Polymer elements of a parent Polymer element within the parent's code, but ultimately I ended up doing it the other way around.
The lesson is that by the time domReady is called, the elements have been upgraded to include the methods which you've defined. Bueno.
<!-- Define inner elements -->
<polymer-element name="child-el" attributes="foo">
<script>
Polymer('child-el', {
/* -- Attributes ------------------------------------------------ */
foo: 'qux'
/* -- Lifecycle ------------------------------------------------- */
created: function() {
console.log('Creating a Child');
},
ready: function () {
// Not ready to access this.parentNode at this point
},
domReady: function () {
this.async(function () {
// By this point this.parentNode is upgraded according to
// http://www.polymer-project.org/resources/faq.html#zerochildren
this.parentNode.doFooWithChild(this);
});
/* -- Public Methods -------------------------------------------- */
getFoo: function() {
return [this.foo];
}
});
</script>
</polymer-element>
<!-- Define custom element -->
<polymer-element name="parent-el">
<script>
Polymer('parent-el', {
/* -- Lifecycle ------------------------------------------------- */
created: function() {
console.log('Creating a Container');
},
ready: function() {
// Not ready to access this.children at this point
},
doFooWithChild: function(child) {
console.log(child.getFoo());
}
});
</script>
</polymer-element>
Thanks for the help!
Collected from the Internet
Please contact [email protected] to delete if infringement.
Comments