首页 文章

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

提问于
浏览 次
0

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

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

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

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

现在我想显示复选框列表而不是dropdownlist（用复选框替换下拉列表）和m用以下方式，但值不绑定到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>

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

knockout.js knockout-mvc

1 回答

  • 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>
    回复于

相关问题