Question

[我第一次尝试描述这个问题很明显是泥巴;我以清晰的名义对它进行了重大改造。我希望我没有悲惨地再次失败。]

我正在尝试使用knockout设置主/详细信息视图，其中详细信息窗格包含复选框列表。我有一个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值添加到userPermissions的{{1}} observableArray。

另请注意，现在可用权限均由以下UserAccount类的实例表示：

Permission

[这些var Permission = function() { var self = this; self.id = 0; self.name = ''; self.description = ''; };属性的值在这里不会改变，所以不需要制作那些可观察的属性。]

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

Permission

此代码显示在<ul data-bind="foreach: $root.permissions"> <li> <label> <input type="checkbox" data-bind="value: id, checked: $parent.userPermissions" />  <span data-bind="text:name" /> </label> </li> </ul>块中，因此with: currentUser $parent

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

哦，我在视图中添加了以下代码，以确认currentUser每次检查/取消选中复选框时都会更新。

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

使用knockout js中的object属性检查绑定

1 个答案: