我是如何在Polymer 1.0元素中循环访问一组DOM元素的？

Question

I'm trying to loop through a set of static paper-checkbox elements, but my code is failing with:

"Uncaught TypeError: this.querySelectorAll(...).forEach is not a function"

The relevant line of code is:

this.querySelectorAll('paper-checkbox').forEach(function(cb) {

I'm sure it's me being dumb - but what am I doing incorrectly in either selecting and/or iterating through the selected (static) checkboxes?

I'm effectively looking for the Polymer 1.0 alternative to JQuery's .each() function.

Many thanks!

Answer 1

Thanks for the responses. I've just found the solution here .

Instead of:

this.querySelectorAll()

I should have been using:

Polymer.dom(this).querySelectorAll()

Works perfectly now!

Thanks again.

Answer 2

The problem is this.querySelectorAll('paper-checkbox') returns a NodeList, not an Array. They looks similar but they are different. NodeList doesn't have the method foreach on its prototype.

An easy solution is to convert your Nodelist to Array like this: Array.prototype.slice.call(document.querySelectorAll('paper-checkbox'))

I suggest you to read this article in MDN on this topic.

Answer 3

This is because

this.querySelector('paper-checkbox') 

is null.

I think you need to go into the shadow root to get the elements eg

 this.shadowRoot.querySelectorAll('paper-checkbox')

added:

this.shadowRoot.querySelectorAll('paper-checkbox').array().forEach(function(cb) {

Answer 4

Answer: You need to use dom-repeat .

---

According to the API documentation here :

"The dom-repeat element is a custom HTMLTemplateElement type extension that automatically stamps and binds one instance of template content to each object in a user-provided array."

---

Example Code:

 <dom-module id="employee-list"> <template> <div> Employee list: </div> <template is="dom-repeat" items="{{employees}}"> <div>First name: <span>{{item.first}}</span></div> <div>Last name: <span>{{item.last}}</span></div> </template> </template> <script> Polymer({ is: 'employee-list', ready: function() { this.employees = [{ first: 'Bob', last: 'Smith' }, { first: 'Sally', last: 'Johnson' }, ...]; } }); </script> </dom-module>