javascript - 如何使用 dom-repeat 内的纸张复选框以不同方式在对话框和控制台上显示对象数组的值

Question

如何使用 dom-repeat 内的纸张复选框以不同方式在对话框和控制台上显示对象数组的值

这是程序，下面提到了我想要的输出。请检查代码并帮我解决这个问题。

Polymer({
    is: 'check-list',
    properties: {
        checkdata: {
            type: Array,
            value: [{
                name: 'Bike',
                no: 1,
            }, {
                name: 'Car',
                no: 2,
            }, {
                name: 'Cycle',
                no: 3,
            }, {
                name: 'Bus',
                no: 4,
            }, {
                name: 'Truck',
                no: 5,
            }],
        },
    },
    checkall: function() {
        var checkvalue = this.checkdata;
            var checktext = [];
            for (i = 0; i < checkvalue.length; i++) {
                var checkarray = {
                    vehiclename:checkvalue[i].name,
                    vehiclenumber:checkvalue[i].no,
                };
                if (checkvalue[i].checked == true) {
                    checktext.push(checkarray);  
                    this.checkeditem = checkarray.vehiclename;
                }
            }
            console.log(checktext);
     });

     <dom-module id="check-list">
         <template>
             <template is="dom-repeat" items="{{checkdata}}">
                 <paper-checkbox on-tap="checkall" checked="{{item.checked}}">{{item.name}}</paper-checkbox>
             </template>
          </template>
     </dom-module>

Answer 1

有几件事需要修复，只是作为一个起点，因为我不太确定你想要做什么，以及你的背景是什么:

• 有必要将所有值(您希望能够在本地 DOM 中绑定(bind)到这些值，或公开这些值以便在父元素中使用)添加到属性数组中。我不确定checkedItem，但我还是添加了它。
• 如果您希望 Polymer 更新属性上的绑定(bind)，请将 notify 属性添加到您的属性中。另外，如果您想通知对象的子属性(例如 this.checkdata[i].checked，由复选框设置)，则需要在初始化时定义该子属性。
• 当使用基元以外的东西(即数组或对象)初始化属性值时，请使用函数；否则，您最终将在 polymer 对象的原型(prototype)上设置值，这会将后续更改(例如数组pushes)应用于组件的所有实例。
• 在 for 循环中使用 const/let 而不是 var。任何 var 声明都会被提升到函数的顶部，并在循环作用域中定义的任何函数内关闭，这可能会导致意外结果(尽管您的代码本来是安全的 - 因为缺少函数——但同样，这是很好的实践)。

我已将上述几点集成到您的代码片段中。

此外，checkeditem 现在是一个可绑定(bind)/通知数组属性，它会附加到每个选择中。显然，每当取消选择相应的复选框时，您还必须删除项目。

Polymer({
  is: 'check-list',
  properties: {
    checkdata: {
      type: Array,
      notify: true, // ??
      value: function() {
        return [{
          name: 'Bike',
          no: 1,
          checked: false
        }, {
          name: 'Car',
          no: 2,
          checked: false
        }, {
          name: 'Cycle',
          no: 3,
          checked: false
        }, {
          name: 'Bus',
          no: 4,
          checked: false
        }, {
          name: 'Truck',
          no: 5,
          checked: false
        }];
      }
    },
    checkeditem: {
      type: Array,
      value: function() { return []; },
      notify: true
    }
  },

  checkall: function() {
    const checkvalue = this.checkdata;
    const checktext = [];
    for (i = 0; i < checkvalue.length; i++) {
      const checkarray = {
        vehiclename: checkvalue[i].name,
        vehiclenumber: checkvalue[i].no,
      };
      if (checkvalue[i].checked) {
        checktext.push(checkarray);
        this.push('checkeditem', checkarray.vehiclename);
      }
    }
    console.log(checktext);
  }
});

<dom-module id="check-list">
  <template>
      
        <template is="dom-repeat" items="{{checkdata}}">
          <paper-checkbox on-tap="checkall" checked="{{item.checked}}">[[item.name]]</paper-checkbox>
        </template>

  </template>
</dom-module>