如果使用dom-repeat在纸张对话框上选中复选框，如何显示值

Question

如果使用dom-repeat在纸张对话框中选中复选框，如何显示值。在控制台中，它将作为数组打印。我想在纸上对话中也一样。有什么建议？我为checktext做了单绑定和双重绑定，但它只显示了多个复选框刻度的一个值。

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

<base href="https://polygit.org/polymer+polymer+v1.11.2/components/" />
<script src="webcomponentsjs/webcomponents-lite.js"></script>
<link rel="import" href="polymer/polymer.html" />
<link rel="import" href="paper-checkbox/paper-checkbox.html" />

<check-list></check-list>

<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

如果我已经理解了checkeditem无法正确更新的问题？我想这是因为你在我们的for循环中有它。如果你把它移到外面它应该工作正常。

＆＃13;

＆＃13;

Polymer({
  is: 'check-list',
  properties: {
    checkdata: {
      type: Array,
      value: [{
        name: 'Bike',
        checked: false
      }, {
        name: 'Car',
        checked: false
      }, {
        name: 'Cycle',
        checked: false
      }, {
        name: 'Bus',
        checked: false
      }, {
        name: 'Truck',
        checked: false
      }],
    },
  },
  checkall: function() {
    var checkvalue = this.checkdata;
    var checktext = [];
    for (i = 0; i < checkvalue.length; i++) {
      if (checkvalue[i].checked == true) {
        checktext.push(checkvalue[i].name);
      }
    }
    this.checkeditem = checktext;
  }
});

＆＃13;

<base href="https://polygit.org/polymer+polymer+v1.11.2/components/" />
<script src="webcomponentsjs/webcomponents-lite.js"></script>
<link rel="import" href="polymer/polymer.html" />
<link rel="import" href="paper-checkbox/paper-checkbox.html" />

<check-list></check-list>

<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>
  <ul>
    <template is="dom-repeat" items="{{checkeditem}}">
        <li>{{item}}</li>
      </template>
  </ul>
  </template>
</dom-module>

＆＃13;

＆＃13;

＆＃13;

此外，我在这里您可以将checkall功能简化为此

checkall: function() {
  let checktext = [];
  for (let checkvalue of this.checkdata) {
    checkvalue.checked && checktext.push(checkvalue.name);
  }
  this.checkeditem = checktext;
}

希望你找到这个有用的