在淘汰赛js中使用对象属性检查绑定

Question

[我第一次描述这个问题的尝试很清楚；我以清晰的名义对它进行了重大修改。我希望我没有惨败……再次失败。]

我正在尝试使用剔除设置主/详细信息视图，其中详细信息窗格包含复选框列表。我有一个 User 对象数组，每个对象又都有一个 UserPermission 对象数组，其中 PermissionId 属性应该确定是否选中了复选框。

因此，简而言之：有一个用户主列表，您可以从中选择一个来查看详细信息。在详细信息窗格中，我有一个复选框列表（从可用权限列表生成）。是否选中给定复选框应由与当前用户关联的 UserPermission 对象数组中匹配 PermissionId 的存在来确定。

我的问题是 - 如何让复选框使用 user.UserPermissions.PermissionId 进行检查绑定？

这里是 my attempt thus far 的 jsfiddle，这里是 another approach I've tried。

Answer 1

经过一番修改，我已经为你找到了解决方案，虽然这不是一个微不足道的改变。

我尝试了一些调整你所拥有的东西，但很明显我需要以不同的方式解决这个问题。

所以，我首先将视图模型的填充与视图模型的定义分开。

这是视图模型定义：

var AppViewModel = function() {
    var self = this;

    //list of client users
    self.users = ko.observableArray();

    //list of permissions available to this client
    self.permissions = ko.observableArray();

    //user to display in details area
    self.currentUser = ko.observable();

    //select user from the master list
    self.selectUser = function(u) {
        self.currentUser(u);
    };
}

这和你的一样，只是函数不希望传入数据。

这个视图模型的绑定现在看起来像这样：

var viewModel = new AppViewModel();
ko.applyBindings(viewModel);
addPermissions(initialData.PermissionList);
addUserAccounts(initialData.UserList);

当然，addPermissions 和 addUserAccounts 函数的详细信息在我的结果中，稍后我会提供指向它的链接。

我先讨论一下是否选中复选框的绑定解决方案。

我查看了the documentation on using checked，并注意到在其中一个示例中，绑定值是一个数组。

因此，为了利用这一点，我创建了一个 UserAccount 类：

var UserAccount = function() {
    var self = this;

    self.id = ko.observable();
    self.email = ko.observable();
    self.clientId = ko.observable();
    self.firstName = ko.observable();
    self.lastName = ko.observable();
    self.createdBy = ko.observable();
    self.userPermissions = ko.observableArray();
};

当UserAccount 添加到视图模型时，它使用以下函数：

var addUserAccount = function(data) {
    var userAccount = new UserAccount();
    userAccount.id(data.UserId);
    userAccount.email(data.UserEmail);
    userAccount.clientId(data.ClientId);
    userAccount.firstName(data.FirstName);
    userAccount.lastName(data.LastName);
    userAccount.createdBy(data.CreatedBy);

    for(var i = 0; i < data.UserPermissions.length; i++) {
        var permissionIdAsString = String(data.UserPermissions[i].PermissionId);
        userAccount.userPermissions.push(permissionIdAsString);
    }
    viewModel.users.push(userAccount);
};

请注意此函数中的 for 循环，它只是将 UserPermissions 数组中的每个 PermissionId 值添加到 UserAccount 的 userPermissions observableArray。

另请注意，现在每个可用权限都由以下Permission 类的实例表示：

var Permission = function() {
    var self = this;

    self.id = 0;
    self.name = '';
    self.description = '';
};

[那些Permission 属性的值不会在这里改变，所以不需要做那些observables。]

现在，鉴于所有这些背景，这就是我如何绑定复选框以便检查正确的复选框：

<ul data-bind="foreach: $root.permissions">
    <li>
        <label>
            <input type="checkbox" 
                   data-bind="value: id, checked: $parent.userPermissions" />
                   &nbsp;<span data-bind="text:name" />
        </label>
    </li>
</ul>

此代码出现在with: currentUser 块中，所以$parent 是 currentUser

这是包含我的解决方案的小提琴的链接：http://jsfiddle.net/jimmym715/eByAa/

哦，我在视图中添加了以下代码，以确认 userPermissions 会随着复选框的每次选中/取消选中而更新。

我希望这个解决方案能满足您的需求。如果您有任何问题，请告诉我。