选择具有由模板生成的ID的元素

Question

我试图创建一个表格，使每个单元格都有一个与其坐标对应的唯一ID。这在Polymer中没有问题;我刚刚完成了

<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'

不起作用，因为它抛出了一个＆＃34;无法设置undefined＆＃34;的innerHTML属性。错误。我不能为我的生活提出一种方法来告诉Polymer的自定义节点查找语法如何查找未在模板中明确定义的ID（例如＆＃39;＃table＆ ＃39;）

Answer 1

首次设置元素时，将设置具有ID的元素的自动节点查找。 AFAIK，您无法将其用于具有动态创建ID的节点。而是使用this.shadowRoot并查询节点：

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

---

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

永远不会奏效。 place是变量，而不是$上的属性。您需要使用数组表示法：

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

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