MandM February 2016

Polymer 1.0: Accessing elements by id in dom-repeat

This question has almost been asked here, with the main difference being that I want to access the elements specifically by their id through Polymer's this.$ syntax. There is an answer on the linked question that says how to do this, but it doesn't work in my instance, and I don't think there's anything special I'm doing (which makes me think that answer is wrong). Edit: I've answered that question with my solution here as recommended, but I think the specificity of using an element id still warrants this question being separate.

So, onto the question. I have the following setup:

<div id="anElement">Content</div>
<template is="dom-repeat" items="{{myItems}}">
  <div id="{{item.name}}>{{item.content}}</div>
</template>
<button on-click="listElements"></button>

...

properties: {
  myItems: {
    type: Array,
    value: function() {
      return [
        { name: "item1", content: "First item" },
        { name: "item2", content: "Second item" }
      ]
    }
  }
},

listElements: function(e) {
  console.log("this.$: ", this.$);
}

Output on button click:

this.$: 
  anElement: div#anElement.style-scope

I can inspect the HTML on the resulting page and see that there are two <div>'s that have the expected id's of item1 and item2, yet they are not listed in the output from listElements.

In actuality, the elements in the dom-repeat are other custom elements with methods that I need to access and use in the click handler, but not being to access them directly is an issue.

I've inspected some of the Polyme

Answers


MandM February 2016

Well, after a little more digging through the documentation, the answer was right there. Just thought I'd share since I have seen answers out there that are wrong!

From the documentation on Node Finding in the Local DOM:

Polymer automatically builds a map of statically created instance nodes in its local DOM, to provide convenient access to frequently used nodes without the need to query for them manually. Any node specified in the element’s template with an id is stored on the this.$ hash by id.

Note: Nodes created dynamically using data binding (including those in dom-repeat and dom-if templates) are not added to the this.$ hash. The hash includes only statically created local DOM nodes (that is, the nodes defined in the element’s outermost template).

...

For locating dynamically-created nodes in your element’s local DOM, use the $$ method:

this.$$(selector)

$$ returns the first node in the local DOM that matches selector.

(Emphasis in the above text was mine)

My own personal note:

NOTE: Notice that this.$$ is not an object, but a method. Therefore, simply printing all elements with an id is not doable with this.$$, but locating a specific dynamically-created element is, which is actually what I need it for - and likely what you need it for too :)

NOTE 2: Adding this after actually taking my own advice and using this.$$(selector). Remember that it is a selector, so if you are looking for an element by its id, remember to preface with #, i.e. this.$$('#myElement')!

Post Status

Asked in February 2016
Viewed 1,129 times
Voted 6
Answered 1 times

Search




Leave an answer