Knockout Checkbox Binding

by Jon Kittell

HTML

Available Folders:
<div data-bind="foreach: $root.availableFolders">
    <input type="checkbox" data-bind="value: Id(), checked: $root.associatedFolderIds, click: $root.toggleAssociation" /> <span data-bind="text: '&nbsp;' + Name()"></span>

    <br/>
</div>
<br/>Associated Folder Ids:
<div data-bind="foreach: $root.associatedFolderIds"> <span data-bind="text: $data"></span>

    <br/>
</div>

JavaScript

debugger;

var folders = [{
    "FolderId": 1,
        "FolderName": "Agent Information",
        "ParentFolderId": 0
}, {
    "FolderId": 2,
        "FolderName": "Presentations Stuff",
        "ParentFolderId": 0
}, {
    "FolderId": 3,
        "FolderName": "Agent Appointment Forms",
        "ParentFolderId": 0
}, {
    "FolderId": 4,
        "FolderName": "Sales Incentives",
        "ParentFolderId": 0
}, {
    "FolderId": 5,
        "FolderName": "New Business Forms",
        "ParentFolderId": 0
}];


function Folder(id, parentId, name) {
    var self = this;
    self.Id = ko.observable(id);
    self.ParentId = ko.observable(parentId);
    self.Name = ko.observable(name);
    self.Selected = ko.observable(false);
}

function ViewModel() {
    var self = this;
    self.availableFolders = ko.observableArray();
    self.associatedFolderIds = ko.observableArray();
    self.associatedFolderNames = ko.observableArray();
    self.associatedFolderParentIds = ko.observableArray();

    self.init = function (folders) {
        if (foldersAreUndefined(folders)) return;
        for (var i = 0; i < folders.length; i++) {
            self.availableFolders.push(new Folder(folders[i].FolderId, folders[i].FolderParentId, folders[i].FolderName));
        }
    };

    self.toggleAssociation = function (item) {
        if (item.Selected() === true) console.log("dissociate item " + item.Id());
        else console.log("associate item " + item.Id());
        item.Selected(!(item.Selected()));
        return true;
    };
}

var viewModel = new ViewModel();
ko.applyBindings(viewModel);
viewModel.init(folders);


function foldersAreUndefined(item) {
    var result = false;
    if (typeof item === "undefined") {
        var message = "Boom: Folders not found."; 
        alert(message);
        result = true;
    }
    return result;
}

String.format = function () {
    var theString = arguments[0];
    for (var i = 1; i < arguments.length; i++) {
        // "gm" = RegEx options for...