Javascript 基于动态id值的聚合物自动节点查找

如何通过id查找聚合节点来访问具有动态id值的节点

比如说

<template>
    <div id="{{ id }}"></div>
</template>

---

您可以像散列一样使用

$

：

id = 'computed_element_id';
this.$[id];

---

的确，可以使用点

或数组

[]

表示法访问JavaScript哈希。如果您有文字名称，则可以使用点符号

this.$。一些\u id

。如果您有一个间接寻址，比如

this.id='some\u id'

，那么您可以使用数组表示法

this.$[this.id]

来查找相同的值

棘手的是，聚合物仅在第一次冲压模板后填充

$

数组，这发生在

就绪之前。如果您有一个到
this.id
的外部绑定，
this.$.[this.id]
可以工作，但是由于您在
ready
中设置了
this.id
，对于
$
的便利性来说已经太晚了

在这种情况下，您可以直接查询shadowRoot：

this.shadowRoot.querySelector（'#'+this.id）

专业提示：在某些情况下，子类可能会提供一个新模板，在这种情况下，
this.shadowRoot
将指向新的shadowRoot，而不是超类版本。因此，最好安装一个可以查询的命名div，例如
this.$.id\u div.querySelector（“#”+this.id”）
Polymer为此提供了一种方法（）：

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

this.$$（选择器）

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

在您的情况下，这应该有效：

console.log(this.$$('#' + id));

根据Polymer 2.x中的说明，
$$
不受支持，因此使用
改为this.shadowRoot.querySelector

如果您使用的是Polymer 1.x，那么您可以使用
$
更多详细信息。也许Polymer在其更新中更改了一些内容，但这个。$.[this.id]对我不起作用。下面的答案很好，尽管如此。$[id]根据此
$
在polymer 2.x中不可用。改用
this.shadowRoot.querySelector
。
console.log(this.$$('#' + id));

console.log(this.shadowRoot.querySelector('#' + id));