选择一个由模板生成ID的元素

Selecting an element with an ID generated by template

本文关键字：ID 元素 一个 选择      更新时间：2023-09-26

我试图创建一个表，使每个单元格都有一个对应于其坐标的唯一ID。这在聚合物中没有问题;我刚刚做了

<table id="table"> <template repeat="{{ file in files }}"> <tr> <template repeat="{{ rank in ranks }}"> <td id="{{file}}{{rank}}">{{ space }}</td> </template> </tr> </template> </table>

，其中ranks, files和space是传递给Polymer()函数(分别为数组和字符串)的对象的键。

现在的问题是根据模板生成的ID选择一个表单元格。做

var place = file + rank; this.$.place.innerHTML = 'foo'

不起作用，因为它会抛出"cannot set innerHTML property of undefined"错误。我无法为我的生活想出一种方法来告诉聚合物的自定义节点查找语法如何查找未在模板中明确定义的ID(如'#table')。

当元素第一次被设置时，自动查找带有id的元素的节点。我敢说，您不能将它用于具有动态创建id的节点。相反，使用this.shadowRoot并查询节点:

this.shadowRoot.getElementById(place).innerHTML = 'foo';

var place = file + rank;
this.$.place.innerHTML = 'foo';

将永远不起作用。place是一个变量，而不是$的属性。你需要使用数组符号:

this.$[place].innerHTML = 'foo';

但是，这不起作用，因为id是在元素准备好之后动态创建的。

相关文章：