使用 Knockout 绑定到两个对象的复选框答案

【问题标题】：Checkboxes binding to two objects with Knockout使用 Knockout 绑定到两个对象的复选框
【发布时间】：2013-04-25 18:29:24
【问题描述】：

我正在创建一个复选框列表。该列表是从此对象创建的：

this.definedRoles = ko.observableArray([]);

但是另一个对象有哪些框应该被选中。

this.userToAdd = {
        ID: ko.observable(""),
        FirstName: ko.observable(""),
        LastName: ko.observable(""),
        Active: ko.observable(""),
        Email: ko.observable(""),
        Roles: ko.observableArray([])//these are the values of the checkboxes
    };

我可以使用以下方法生成复选框：

<ul data-bind="foreach: $root.definedRoles" style="list-style:none;">
     <li>
         <label class="checkbox">
              <input type="checkbox" data-bind="value: Id" value="" />
              <span data-bind="text: Name"></span>
         </label>
     </li>
</ul>

每次我尝试添加绑定以使用

选中某些框

<input type="checkbox" data-bind="value: Id, checked: $root.userToAdd.Roles.Active" value="" />

它没有产生任何结果。不确定如何应用此绑定。谢谢

【问题讨论】：

标签： javascript knockout.js knockout-2.0

【解决方案1】：

您可以做的是添加一个函数来检查给定用户是否具有角色，如下所示：

var User = function() {
    var self = this;
    self.ID = ko.observable(""),
    self.FirstName = ko.observable(""),
    self.LastName = ko.observable(""),
    self.Active = ko.observable(""),
    self.Email = ko.observable(""),
    self.Roles = ko.observableArray([])//these are the values of the checkboxes,

    self.IsRoleActive = function(role) {
        for(i=0; i<self.Roles().length; i++) { 
            if(self.Roles()[i] == role && self.Roles()[i].Active) {
                return true;
            }
        }
        return false;
    }
};

var userToAdd = new User();

然后你的绑定应该是这样的：

<input type="checkbox" 
       data-bind="value: Id, checked: $root.userToAdd.IsRoleActive"/>

当然，这一切只有在 Roles 和 definedRoles 都是字符串数组时才有效。

【讨论】：

【解决方案2】：

由于 Roles 是可观察的，因此您没有正确调用它：

$root.userToAdd.Roles().Active

虽然它是一个数组，但 .Active 不会解决任何问题，我想。

它只是一个详细说明用户角色的字符串数组吗？如果是，那么您需要按照以下方式做一些事情：

$root.userToAdd.Roles.indexOf(Name()) !== -1

查看数组是否包含角色的字符串。

【讨论】：