2017-06-05 53 views
0

所以,当页面加载时,如果复选框先前已被选中,并且数据在数据库中,那么复选框应显示为在表单中被选中。目前他们没有被检查(没有绑定到数据库)。如何使用Aurelia和mutiselect checkboxlist UI为数组提供数据绑定?

下面是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'; 
    } 
    } 

这里来回购的链接和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

任何建议都非常赞赏,感谢

回答