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

时间:2014-06-07 23:45:45

标签: javascript polymer web-component shadow-dom

我试图创建一个表格,使每个单元格都有一个与其坐标对应的唯一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>

其中ranksfilesspace是传递给Polymer()函数的对象的键(分别是数组和字符串)。这一切都按预期工作。

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

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

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

1 个答案:

答案 0 :(得分: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。