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中并且子级已升级。

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

Answer 2

在回答并与@ebidel进行简短讨论后，我想出了解决问题的完整解决方案。基本上，我想在父代码中访问父Polymer元素的子Polymer元素，但最终我反过来做了。

经验教训是，在调用domReady时，元素已升级为包含您定义的方法。布埃诺。

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

感谢您的帮助！

访问嵌套的聚合物元素

2 个答案: