Polymer 1.0：在 dom-repeat 中通过 id 访问元素

Question

这个问题几乎被问过，主要区别在于我想通过 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 documentation，但没有找到造成这种情况的原因。

Answer 1

好吧，在对文档进行更多挖掘之后，答案就在那里。只是想我会分享，因为我看到那里的答案是错误的！

来自 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.$$ 是可行的，但是定位特定的动态创建的元素 是 [=40] =]，这实际上是我需要它的用途 - 可能您也需要它:)

注意 2： 在实际采纳我自己的建议并使用 this.$$(selector) 后添加此内容。请记住它是一个选择器，因此如果您要通过 id 查找元素，请记住以 # 作为开头，即 this.$$('#myElement')!

Polymer 1.0：在 dom-repeat 中通过 id 访问元素

Polymer 1.0: Accessing elements by id in dom-repeat

polymer

polymer-1.0