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>

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

Here是指向完整版的链接。

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);
  });
}

Developer guide

中记录了这一点

Answer 2

所以，尽管问题没有要求通过id访问元素，但这仍然是访问这些元素的可接受方式，尽管不是@Maksym Galich的答案。

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

来自Node Finding in the Local DOM的文档：

Polymer在其本地DOM中自动构建静态创建的实例节点的映射，以便方便地访问常用节点，而无需手动查询它们。在元素模板中使用id指定的任何节点都存储在此。$ hash by id。
中
注意：使用数据绑定动态创建的节点（包括dom-repeat和dom-if模板中的节点）不会添加到此。$ hash 。哈希仅包含静态创建的本地DOM节点（即元素最外层模板中定义的节点）。

...

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

此。$$（选择器）

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

（上面的文字中的强调是我的）

我个人记录：

注意：请注意此。$$ 不是对象，而是方法。因此，使用id打印所有元素只需，但是我需要它 - 也可能是你需要的东西：）

Answer 3

您无法获取dom-repeat中的元素列表，但您可以在dom-repeat中为每个元素使用id。喜欢这个

<template is="dom-repeat" items="{{dataView}}">
    <neon-animatable id="{{item.id}}">
        <inner-content data="{{item.content}}"></inner-content>
    </neon-animatable>
</template>

通过下一个选择获取元素

var el = this.$['something_id'];

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

3 个答案: