Question

此问题几乎被问到here，主要区别在于我希望通过Polymer id语法专门通过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>具有item1和item2的预期ID，但它们未列在来自listElements的输出。

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

我已经检查了一些Polymer documentation，但没有找到原因。

Answer 1

嗯，经过一些文档挖掘后，答案就在那里。我以为我会分享，因为我看到那些错误的答案！

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

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

...

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

此。$$（选择器）

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

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

我个人记录：

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

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

Polymer 1.0：在dom-repeat

1 个答案: