javascript - 选择具有由模板生成的 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和是传递给 Polymer() 函数的对象files上space的键（分别为数组和字符串）。这一切都按预期工作。

现在的问题是通过模板生成的 ID 选择表格单元格之一。正在做

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

不起作用，因为它会引发“无法设置未定义的 innerHTML 属性”错误。我一辈子都想不出一种方法来告诉 Polymer 的自定义节点查找语法如何查找模板中未明确定义的 ID（例如“#table”）。

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 是在准备好元素之后动态创建的。