javascript - 访问嵌套的聚合物元素

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 类型。

我希望这是有道理的。

谢谢！

score 5 · Accepted Answer

访问元素的轻量级 DOM 子级的最安全时间是在domReady()回调中。created//不能太早，因为该元素还不能保证在 DOM 和子级升级ready。attached

注意：“container”和“child”不是有效的自定义元素名称。您需要在名称中的某处使用“-”。所以“容器元素”或“子元素”就可以了。

score 3 · Accepted Answer

在与@ebdel进行了回答和简短讨论后，我想出了解决问题的完整方法。基本上，我想在父代码中访问父 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>

谢谢您的帮助！

javascript - 访问嵌套的聚合物元素

2 回答 2

Related

Reference