Question

[My first attempt at describing the issue was clear as mud; I significantly reworked it in the name of clarity. I hope I haven’t failed miserably…again.]

I’m attempting to set up a master/details view using knockout where the details pane includes a list of checkboxes. I have an array of User objects, each of which has in turn an array of UserPermission objects where the PermissionId property is what should determine if the checkbox is checked.

So, in short: There’s a master list of users, from which you select one to view details. In the details pane, I have a list of checkboxes (generated from a list of available permissions). Whether or not a given checkbox is checked should be determined by the persences of a matching PermissionId within the array of UserPermission objects associated with the current user.

My question is – how do I get the checkboxes to use the user.UserPermissions.PermissionId for the checked binding?

Here’s a jsfiddle of my attempt thus far, and here’s another approach I’ve tried.

Answer 1

After a bit of tinkering, I’ve got a solution for you, though it’s not a trivial change.

I made a few attempts at tweaking what you had, but it became obvious that I needed to approach the problem differently.

So, I started by separating the population of the view model from the definition of the view model.

Here’s the view model definition:

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

This is the same as what you had, except that the function does not expect data to be passed in.

The binding of this view model now looks like this:

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

Of course, the details of the addPermissions and addUserAccounts functions are in my resulting fiddle, and I’ll provide the link to that in a bit.

Let me first discuss the solution for binding whether or not a checkbox is checked.

I took a look at the documentation on using checked, and I noticed that in one of the examples, the bound value is an array.

So, to take advantage of that, I created a UserAccount class:

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

When a UserAccount is added to the view model, it uses the following function:

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

Notice the for loop in this function, which is simply adding each of the PermissionId values from the UserPermissions array to the userPermissions observableArray of the UserAccount.

Note also that the available permissions are now each represented by an instance of the following Permission class:

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

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

[The values of those Permission properties aren’t going to change here, so no need to make those observables.]

Now, given all that background, here’s how I bound the checkboxes so that the proper checkboxes are checked:

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

This code appears within the with: currentUser block, so $parent is currentUser

Here’s the link to the fiddle that contains my solution: http://jsfiddle.net/jimmym715/eByAa/

Oh, and I added the following code to the view to confirm that userPermissions is getting updated with each check/uncheck of a checkbox.

I hope this solution suits your needs. Let me know if you have any questions.