我如何循环遍历 Polymer 1.0 元素中的一组 DOM 元素？

Question

我试图遍历一组静态纸质复选框元素，但我的代码失败了：

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

相关的代码行是：

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

我确定是我太笨了 - 但是我在选择 and/or 遍历选定的（静态）复选框时做错了什么？

我正在有效地寻找 JQuery 的 .each() 函数的 Polymer 1.0 替代品。

非常感谢！

Answer 1

这是因为

this.querySelector('paper-checkbox')

为空。

我认为您需要进入阴影根以获取元素，例如

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

已添加：

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

Answer 2

答：你需要使用dom-repeat.

根据 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."

示例代码：

<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>

Answer 3

感谢您的回复。我刚刚找到解决方案 here.

而不是：

this.querySelectorAll()

我应该一直在使用：

Polymer.dom(this).querySelectorAll()

现在完美运行！

再次感谢。

Answer 4

问题是 this.querySelectorAll('paper-checkbox') returns 一个节点列表，而不是一个数组。它们看起来很相似，但它们是不同的。 NodeList 的原型上没有 foreach 方法。

一个简单的解决方案是像这样将您的节点列表转换为数组： Array.prototype.slice.call(document.querySelectorAll('paper-checkbox'))

我建议您阅读 MDN 中有关此主题的 this article。

我如何循环遍历 Polymer 1.0 元素中的一组 DOM 元素？

How am I meant to loop through a set of DOM elements within a Polymer 1.0 Element?

javascript

foreach

polymer

polymer-1.0