Question

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

“Uncaught TypeError：this.querySelectorAll（...）。forEach不是函数”

相关的代码行是：

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

我确定这是我的愚蠢 - 但是我在选择和/或迭代所选（静态）复选框时做错了什么？

我正在寻找使用JQuery的.each（）函数的Polymer 1.0替代方法。

非常感谢！

Answer 1

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

而不是：

this.querySelectorAll()

我应该一直在使用：

Polymer.dom(this).querySelectorAll()

现在完美运作！

再次感谢。

Answer 2

问题是this.querySelectorAll('paper-checkbox')返回NodeList，而不是Array。它们看起来很相似但却不同。 NodeList在其原型上没有方法foreach。

一个简单的解决方案是将Nodelist转换为Array，如下所示： Array.prototype.slice.call(document.querySelectorAll('paper-checkbox'))

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

Answer 3

这是因为

this.querySelector('paper-checkbox')

为空。

我认为你需要进入阴影根来获取元素，例如。

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

加入：

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

Answer 4

答案：您需要使用dom-repeat。

<小时/> 根据{{3}}：

“dom-repeat元素是一个自定义的HTMLTemplateElement类型扩展，它自动将模板内容的一个实例标记并绑定到用户提供的数组中的每个对象。”

<小时/> 示例代码：

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

我是怎么想在Polymer 1.0 Element中循环遍历一组DOM元素的呢？

4 个答案: