访问嵌套的聚合物元素

Question

假设我已经定义了两个自定义的Polymer元素

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

然后在使用这些元素的标记中:

<container>
    <child foo="bar"></child>
    <child foo="baz"></child>
</container>

正如我在代码中评论的那样,我想使用自定义元素的自定义元素子节点的方法和/或属性(而不是模板的子节点).当然,我知道不仅仅是简单地循环一个数组,但是在这一点上我并不完全确定如何基本上访问每个自定义子类作为它们的Polymer类型.

我希望这是有道理的.

谢谢!

Answer 1

访问元素的轻DOM子节点的最安全时间是domReady()回调.created/ ready/ attached可能太早,因为该元素尚未保证在DOM中并且子级已升级.

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

注意:"container"和"child"不是有效的自定义元素名称.你需要在名字的某个地方加上" - ".所以"容器元素"或"孩子们"会没事的.