访问附加的dom-repeat内的元素

Question

我想访问一个内部的元素dom-repeat.在这里,el返回空数组:

<dom-module id="child-element">
    <template>
        <div id="ida">
            <ul>
                <template is="dom-repeat" items="{{user}}" id="items">
                    <li class = "classa">{{item.name}}</li>
                </template>
            </ul>
        </div>
    </template>

    <script>
        ChildElement = Polymer({
            is: 'child-element',
            factoryImpl(users) {
                this.user = users;
            },
            properties: {
                user: {
                    type: Array
                }
            },
            attached: function() {
                var el = Polymer.dom(this.root).querySelectorAll("#ida .classa");
                console.log("el",el);
            }
        });
    </script>
</dom-module>

如何dom-repeat从Polymer中的其他位置访问动态创建的元素？

这是完整版的链接.

Answer 1

当调用附件时,可能尚未初始化子项.将代码包装在异步函数中.

attached:function(){
  this.async(function() {
   // access sibling or parent elements here
     var el = Polymer.dom(this.root).querySelector("#ida .classa");
     console.log("el",el);
  });
}

这在 开发人员指南中有记录

Answer 2

因此,虽然问题没有要求通过他们id访问元素,但这仍然是访问这些元素的可接受方式,尽管不是由@Maksym Galich回答的.

不是通过this.$对象访问,而是通过该方法访问动态创建的元素的正确this.$$(selector)方法.

从本地DOM中的节点查找文档:

Polymer自动在其本地DOM中构建静态创建的实例节点的映射,以便方便地访问常用节点,而无需手动查询它们.在元素模板中使用id指定的任何节点都存储在此.$ hash by id中.

注意:使用数据绑定动态创建的节点(包括dom-repeat和dom-if模板中的节点)不会添加到此.$ hash中.哈希仅包括静态创建的本地DOM节点(即,在元素的最外层模板中定义的节点).

...

要在元素的本地DOM中定位动态创建的节点,请使用$$方法:

此.$$(选择器)

$$返回本地DOM中与选择器匹配的第一个节点.

(上面的文字强调是我的)

我个人的说明:

注:请注意,这$$.是不是一个对象,但一个方法.因此,简单的打印与所有元素id是不是可行的有this.$$,但定位特定的动态创建的元素是,这实际上是什么,我需要它-而且可能你需要它太:)