Question

如何通过id？

使用Polymer节点查找来访问具有动态id值的节点

例如

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

和js

Polymer("my-element", {
    ready: function() {
        if (!this.id) {
            this.id = 'id' + (new Date()).getTime();
        }

        console.log(this.$.id); // this part needs to find my div element
    }
});

Answer 1

确实可以使用点.或数组[]表示法访问JavaScript哈希。如果您有文字名称，则可以使用点符号this.$.some_id。如果您有间接，例如this.id = 'some_id'，那么您可以使用数组表示法this.$[this.id]来查找相同的值。

棘手的部分是聚合物仅在第一次标记模板后填充$数组，该模板发生在ready之前。如果你有this.id的外部绑定，this.$.[this.id]会有效，但由于你在this.id中设置了ready，因此$便利性为时已晚。< / p>

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

this.shadowRoot.querySelector('#' + this.id)

专业提示：在某些时候，子类可能会提供一个新模板，在这种情况下，this.shadowRoot将指向新的阴影根，而不是超类版本。出于这个原因，最好安装一个可以查询的命名div，例如this.$.id_div.querySelector('#' + this.id')。

Answer 2

您可以像哈希一样使用$：

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

Answer 3

Polymer为此提供了一种方法（source）：

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

this.$$(selector)

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

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

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

Answer 4

根据Polymer 2.x this document不支持$$，所以请使用而是this.shadowRoot.querySelector。

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

如果您使用的是Polymer 1.x，那么您可以使用$$。

具有动态id值的聚合物自动节点查找

4 个答案: