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

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为时已晚了$方便.

在这种情况下,您可以直接查询shadowRoot:

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

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

Answer 2

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

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