Checkboxes, arrays, and knockoutjs

HTML

<h2>
    User Accounts</h2>
<p>
    You have <span data-bind="text: users().length">&nbsp;</span> user acount(s)</p>
<p>
    Click on the user name in the list below to edit.</p>
<div id="editFrame">
    <div class="masterList">
        <ul id="userAccountList" data-bind="template: { name: 'userListTemplate', foreach: users }">
            
        </ul>
        </div>
    <div id="userDetail" class="details" data-bind="with: currentUser">
        <h3>
            Details for <span data-bind="text: FirstName" />
        </h3>
        <ul>
            <li>
                <label for="detailsUserEmail">
                    E-mail</label><input id="detailsUserEmail" data-bind="value: UserEmail" /></li>
            <li>
                <label for="detailsFirstName">
                    First Name</label><input id="detailsFirstName" data-bind="value: FirstName" /></li>
            <li>
                <label for="detailsLastName">
                    Last Name</label><input id="detailsLastName" data-bind="value: LastName" /></li>
            
            </ul>
            <div class="permissionsList">
            <h4>Permissions</h4>
            
            <p> The check state for the following checkboxes should be determined by the presence of a currentUser.UserPermissions.PermissionId that matches the PermissionList.PermissionId used to set the value.
            
            
    </div>
    <ul data-bind="template: { name: 'clientPermissionsTemplate', foreach: $root.permissions }"></ul></div>
</div>
<script type="text/html" id="userListTemplate">
    <li><a href="#" data-bind="click: $root.selectUser" /><span data-bind="text: UserEmail"/></a></li>
</script>

<script type="text/html" id="clientPermissionsTemplate">

<li><label><input type="checkbox" data-bind="value:PermissionId,checked:$root.currentPermissions" /><span data-bind="text:Name" /></label></li>
</script>

CSS

h2{font-size:1.3em}

.masterList
        {
            width: 25%;
            float: left;
        }
        #userDetail, .details
        {
            margin-left: 25.1%;
            width: 74.9%;
        }
        
        .details ul
        {
            list-style-type: none;
        }
        
        .details ul li
        {
            margin: .5em 1em;
        }
        #editFrame
        {
            overflow: auto;
        }
h4 {font-weight:bold;}

JavaScript

var initialData = {
    "UserList": [{
        "UserId": 1,
        "UserEmail": "jdoe@gmail.com",
        "ClientId": -1,
        "FirstName": "John",
        "LastName": "Doe",
        "UserPermissions": [{
            "UserId": 1,
            "PermissionId": 1,
            "CreatedBy": "system"},
        {
            "UserId": 1,
            "PermissionId": 2,
            "CreatedBy": "system"}]},
    {
        "UserId": 2,
        "UserEmail": "jsmith@gmail.com",
        "ClientId": -1,
        "FirstName": "Jane",
        "LastName": "Smith",
        "CreatedBy": "system",
        "UserPermissions": [{
            "UserId": 2,
            "PermissionId": 1,
            "CreatedBy": "system"},
        {
            "UserId": 2,
            "PermissionId": 3,
            "CreatedBy": "system"}]}],
    "PermissionList": [{
        "PermissionId": 1,
        "Name": "Basic",
        "Description": "Basic Access"},
    {
        "PermissionId": 2,
        "Name": "Power User",
        "Description": "Power User"},
    {
        "PermissionId": 3,
        "Name": "Admin",
        "Description": "System Administrator"}]
};

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

    //list of client users
    self.users = ko.observableArray(data.UserList);
    var ary = MapPermissionsToArray(data.UserList[0].UserPermissions);
     alert(ary.join("~"));
    //list of permissions available to this client
    self.permissions = ko.observableArray(data.PermissionList);

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

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

        self.currentUser(u);
        var ary=MapPermissionsToArray(u.UserPermissions);
        alert(ary.join("<"));
        self.currentPermissions =ary;
    };

}

function MapPermissionsToArray(permissions) {
    if (permissions == "undefined") return null;
    
    var result = [];
    for...