如何绑定对象列表的剔除选中复选框？答案

【问题标题】：how to bind knockout checked checkboxes for a list of objects?如何绑定对象列表的剔除选中复选框？
【发布时间】：2014-03-15 03:33:44
【问题描述】：

我是 Knockout 的新手，正在尝试将选中的复选框绑定到 Knockout 数组。

var userRoleList = 
  [ ("UserTypeId": 1, "UserTypeName": "Admin")
    ("UserTypeId": 2, "UserTypeName": "NonAdmin")
    ("UserTypeId": 3, "UserTypeName": "Inspector")
  ]

下面是在下拉列表中显示用户角色列表并将选定的用户角色绑定到敲除可观察数组的代码，它工作得非常好。

 <td>                                         
    <select data-bind='options: $root.userRoleList, optionsText: "UserTypeName", optionsValue: "UserTypeId", optionsCaption: "Select...", value: UserTypeId'></select>                                                                                         
 </td>

现在我想显示复选框列表而不是下拉列表（将下拉列表替换为复选框），我正在使用以下方式，但该值未绑定到敲除可观察数组。

 <td>                                         
   <div class="userRole userRoleEdit" data-bind="foreach: $root.userRoleList">                                                
     <label data-bind="text: UserTypeName" style="width:50%"></label>                                                                                                  
     <input type="checkbox" data-bind=" attr: { value: UserTypeId, text:UserTypeName, id: UserTypeId, name: UserTypeName } " />                                                                                                
   </div>
 </td>

你能告诉我我做错了什么吗？

【问题讨论】：

标签： knockout.js knockout-mvc

【解决方案1】：

首先，您在创建userRoleList 数组时使用了不正确的数组初始化语法。你应该像下面的代码那样重写它。

var viewModel = function () {
    var self = this;
    self.selectedRoleList = ko.observableArray([]);
    self.userRoleList = [{
        UserTypeId: 1,
        UserTypeName: "Admin"
    }, {
        UserTypeId: 2,
        UserTypeName: "NonAdmin"
    }, {
        UserTypeId: 3,
        UserTypeName: "Inspector"
    }];
}
var vm = new viewModel();
ko.applyBindings(vm);

然后，你应该改变你的 html:

<div data-bind="foreach: $root.userRoleList">
    <label data-bind="text: UserTypeName"></label>
    <input type="checkbox" data-bind="checked: $root.selectedRoleList, value: UserTypeId" />
</div>

如果你愿意，可以测试一下：

<div data-bind="foreach: $root.selectedRoleList">
    <label data-bind="text: $data"></label>
</div>

【讨论】：