Polymer 1.0:在dom-repeat中按id访问元素

Question

这里几乎提出了这个问题,主要区别在于我想id通过Polymer的this.$语法专门访问这些元素.还有就是在链接的问题,说如何做到这一点的答案,但它并不在我的情况下工作,我不觉得有什么特别的,我做的(这让我觉得答案是错误的).编辑:我已按照推荐的方式使用我的解决方案回答了这个问题,但我认为使用元素的特殊性id仍然保证这个问题是分开的.

所以,关于这个问题.我有以下设置:

<div id="anElement">Content</div>
<template is="dom-repeat" items="{{myItems}}">
  <div id="{{item.name}}>{{item.content}}</div>
</template>
<button on-click="listElements"></button>

...

properties: {
  myItems: {
    type: Array,
    value: function() {
      return [
        { name: "item1", content: "First item" },
        { name: "item2", content: "Second item" }
      ]
    }
  }
},

listElements: function(e) {
  console.log("this.$: ", this.$);
}

点击按钮输出:

this.$: 
  anElement: div#anElement.style-scope

我可以检查结果页面上的HTML,看看有两个<div>具有预期id的item1和item2,但是它们没有在输出中列出listElements.

实际上,dom-repeat其他自定义元素中的元素具有我需要在单击处理程序中访问和使用的方法,但不是直接访问它们是一个问题.

我已经检查了一些Polymer文档,但没有找到原因.

Answer 1

好吧,经过一些文档的挖掘,答案就在那里.只是想我分享,因为我看到那里的答案是错的!

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

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

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

...

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

此.$$(选择器)

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

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

我个人的说明:

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

注2:在实际采纳我自己的建议和使用之后添加它this.$$(selector).请记住,它是一个选择器,所以如果你正在寻找一个元素id,请记住前言#,即this.$$('#myElement')!