0

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

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

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

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

到目前为止，这是我尝试的一个 jsfiddle，这是我尝试过的另一种方法。

4

1 回答 1

0

经过一番修修补补，我有一个解决方案给你，虽然这不是一个微不足道的改变。

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

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

这是视图模型定义：

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

当然，addPermissionsandaddUserAccounts函数的细节在我得到的小提琴中，稍后我会提供指向它的链接。

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

我查看了有关使用 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();
};

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

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到UserAccount.

另请注意，现在每个可用权限都由以下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每次选中/取消选中复选框都会更新。

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

于 2012-07-28T23:21:12.197 回答