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

如何通过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
    }
});

解决方法:

确实可以使用任一点访问JavaScript哈希.或array []表示法.如果你有一个文字名称,你可以使用点符号.$.ome_id.如果你有一个间接,比如this.id =’some_id’,那么你可以使用数组表示法.$[this.id]找到相同的值.

棘手的部分是Polymer只在第一次标记模板后填充$数组,这在准备好之前就已经发生了.如果你有一个与this.id的外部绑定,这个.$.[this.id]会起作用,但是因为你准备好了这个.id为了便利而为时已晚.

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

this.shadowRoot.querySelector(‘#’this.id)

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

标签：javascript,polymer
来源： https://codeday.me/bug/20190927/1822580.html