CODEWITHSUNDEEP
javascriptpolymerweb-componentshadow-dom
CFK
CFK

Reputation: 93

Selecting an element with an ID generated by template

I'm trying to create a table such that each cell has a unique ID corresponding to its coordinates. This is no trouble in Polymer; I've just done

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

where ranks, files and space are keys on the object passed to the Polymer() function (arrays and a string, respectively). This all works as expected.

The problem now is selecting one of the table cells by its template-generated ID. Doing

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

doesn't work, as it throws a "cannot set innerHTML property of undefined" error. I cannot for the life of me come up with a way to tell Polymer's custom node-finding syntax how to look for an ID that isn't explicitly defined in the template (such as '#table').

Upvotes: 0

Views: 354

Answers (1)

ebidel
ebidel

Reputation: 24119

Automatic node finding on elements with IDs is setup when the element is first set up. AFAIK, you can't use it for nodes with dynamically created IDs. Instead, use this.shadowRoot and query for the node:

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

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

will never work. place is a variable and not a property on $. You'd need to use array notation:

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

However, this won't work because the ids are created dynamically, after the element is prepared.

Upvotes: 1

Related Questions