如何使用 Aurelia 和多选复选框列表 UI 为数组提供数据绑定？答案

【问题标题】：How do I provide databinding to an array using Aurelia and a mutiselect checkboxlist UI?如何使用 Aurelia 和多选复选框列表 UI 为数组提供数据绑定？
【发布时间】：2017-06-05 15:01:05
【问题描述】：

所以当页面加载时，如果之前已经选择了复选框，并且数据在数据库中，那么复选框应该在表单中显示为被选中。目前它们没有被检查（没有绑定到数据库）。

这里是html

<div class="multiselect" style="width:170px; margin-top:30px">
<div class="selectBox" click.delegate="showCheckboxes('causes')">
<select>
<option style="font-weight:normal">Cause(s) to support</option>
</select>
<div class="overSelect"></div>
</div>
<iron-dropdown id="causes" horizontal-align="right" vertical-align="top" style="margin-top:25px;">
<div class="dropdown-content" style="background-color:white;box-sizing: border-box; max-width: 270px; max-height: 362px;overflow:auto;border:1px #dadada solid">
<label repeat.for="cause of causes" for="cause" style="display:block;text-align:left;margin-left:5px;margin-right:5px">
<input type="checkbox" value.bind="cause" checked.bind="selectedCause" change.delegate="causePicked()"> ${cause}
</label>
</div>
</iron-dropdown>
</div>

这里是 JavaScript

  causes = ['Christian', 'Environmental', 'Hunger', 'Animal Rights', 'Homeless', 'Veterans', 'Elderly', 'other'];
  talents = ['music', 'athletics', 'childcare', 'mechanics', 'construction', 'computers', 'communication', 'chess playing', 'listening', 'other'];
  works = ['hashbrown slinging', 'nail hammering', 'leaf removal', 'floor mopping', 'counseling', 'other'];
  selectedCause = [];
  selectedTalent = [];
  selectedWork = [];

  async activate() {
    this.uid = this.app.auth.getTokenPayload().sub;
    this.user = await this.app.appState.getUser(this.uid);
    //this.app.appState.user;
    this.role = this.user.userType;
    this.causes.sort();
    this.talents.sort();
    this.works.sort();
    if (this.user.userType === 'Charity'){
      this.role = 'Charity Manager';
    }
  }

这里是 repo 和 src 代码的链接 https://github.com/WebJamApps/combined-front/blob/dev/src/dashboard-child-routes/user-account.html

https://github.com/WebJamApps/combined-front/blob/dev/src/dashboard-child-routes/user-account.js

非常感谢任何建议，谢谢

【问题讨论】：

标签： data-binding aurelia checkboxlist