访问 dom 内的元素 - 在附件中重复

Question

我想访问 dom-repeat 中的元素。这里，el returns 空数组：

<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 是完整版的 link。

Answer 1

你无法获取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>

然后通过nextselect

获取元素

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

Answer 2

调用 attached 时，子项可能尚未初始化。将您的代码包装在异步函数中。

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 3

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

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

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

Polymer automatically builds a map of statically created instance nodes in its local DOM, to provide convenient access to frequently used nodes without the need to query for them manually. Any node specified in the element’s template with an id is stored on the this.$ hash by id.

Note: Nodes created dynamically using data binding (including those in dom-repeat and dom-if templates) are not added to the this.$ hash. The hash includes only statically created local DOM nodes (that is, the nodes defined in the element’s outermost template).

...

For locating dynamically-created nodes in your element’s local DOM, use the $$ method:

this.$$(selector)

$$ returns the first node in the local DOM that matches selector.

(上面文字中的重点是我的)

我自己的个人笔记：

注意： 注意 this.$$ 不是一个对象，而是一个方法。因此，简单地用 id 打印所有元素 not this.$$ 是可行的，但是定位特定的动态创建的元素 是 [=36] =]，这实际上是我需要它的用途 - 可能您也需要它:)

访问 dom 内的元素 - 在附件中重复

Accessing elements inside dom-repeat in attached

polymer