polymer 1.0 : Accessing elements by id in dom-repeat

Question

这个问题几乎有人问过here ，主要区别在于我想通过 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 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.$$ 不是一个对象，而是一个方法。因此，使用 this.$$ 简单地打印所有具有 id 的元素不是可行的，但是定位一个特定的动态创建的元素 是，这实际上是我需要它的目的 - 可能你也需要它:)

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