最新消息:雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客

javascript - Accessing a nested polymer element - Stack Overflow

programmeradmin2浏览0评论

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 mented 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!

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 mented 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!

Share Improve this question edited Apr 25, 2014 at 8:39 basicallydan asked Apr 23, 2014 at 20:36 basicallydanbasicallydan 2,1523 gold badges26 silver badges41 bronze badges
Add a ment  | 

2 Answers 2

Reset to default 5

The safest time to access an element's light DOM children is in the domReady() callback. created/ready/attached nay be too early because the element is not yet guaranteed to be in the DOM and children upgraded.

  • http://www.polymer-project/resources/faq.html#zerochildren
  • http://www.polymer-project/docs/polymer/polymer.html#lifecyclemethods

Note: "container" and "child" are not valid custom element names. You need a "-" somewhere in the name. So "container-element" or "child-el" would be fine.

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/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!

发布评论

评论列表(0)

  1. 暂无评论