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

Question

如果使用 dom-repeat 在 paper-dialog 中选中复选框，如何显示值。在控制台中，它作为数组打印。我想要纸质对话上的同样的内容。有什么建议么？我已经对勾选文本进行了单绑定(bind)和双绑定(bind)，但它只显示多个复选框勾选的一个值。

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 循环中。如果你把它移到外面它应该可以正常工作。

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;
  }
});

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

此外，当我在这里时，您可以将您的 checkall 函数简化为这个

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

希望你觉得这很有用 🙂