Question

我是淘汰赛的新手，并尝试将已选中的复选框绑定到淘汰赛阵列

var userRoleList = [（“UserTypeId”：1，“UserTypeName”：“Admin”）（“UserTypeId”：2，“UserTypeName”：“NonAdmin”）（“UserTypeId”：3，“UserTypeName”：“Inspector”） ]

下面是在下拉列表中显示用户角色列表并将所选用户角色绑定到knockout observable数组的代码，该数组工作正常。

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

现在我想显示复选框列表而不是dropdownlist（用复选框替换下拉列表）并按照以下方式进行操作，但是值没有绑定到knockout obersvable数组。

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

你能告诉我我做错了吗？

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

如何绑定敲门检查复选框的对象列表？

1 个答案: