JSFiddle - React, Tailwind, and code Playground

by NinjaFish

HTML

<script src="http://ajax.aspnetcdn.com/ajax/knockout/knockout-2.2.1.js"></script>
<ul data-bind="foreach: custom_selectedChoices">
    <li>
        <input type="checkbox" data-bind="attr: { value: value }, checked: isSelected" />
      	<span data-bind="text: text"></span>
    </li>
</ul>
<hr />
<div data-bind="text: ko.toJSON(custom_selectedChoices)"></div>
<hr />
<div data-bind="text: ko.toJSON(selectedChoices)"></div>

JavaScript

//* multi selectbox without jquery template
var dataFromServer = 
    {
        headerValue1 : "blah",
        headerValue2 : "blah",
        selectedChoices :   [{ code :  1 }, { code: 2 }]
    };
var choices = [
    { text : "one", value : 1 },
    { text : "two", value : 2 },
    { text : "three", value : 3 },
    { text : "four", value : 4 },
    { text : "five", value : 5 }
    ];

var viewModel = {
    dataFromServer : dataFromServer,
    custom_selectedChoices: ko.observableArray($.map(choices, function (item) {
        return {
            text: item.text,
            value: item.value,
            isSelected: ko.observable(
                    $.grep(dataFromServer.selectedChoices, function(serverItem) {
                        return serverItem.code == item.value;
                    }).length > 0
                )
            };
        }
      ) // end $.map
    ), // end ko.observableArray
};

viewModel.selectedChoices = ko.computed(function () {
    return $.map(this.custom_selectedChoices(), function(item) {
        return item.isSelected() ? { code: item.value } : null;
    }); 
}, viewModel);

/*
viewModel.selectedChoicesDelimited = ko.computed(function () {
    return $.map(this.selectedChoices(), function (item) {
      return item.isSelected() ? item.text : null;
    }).join(",");
}, viewModel);
*/
ko.applyBindings(viewModel);