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: 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(selectedChoices)"></div>
<hr />
<!--<div data-bind="text: selectedChoicesDelimited"></div>-->

JavaScript

//* multi selectbox without jquery template
var dataFromServer = [{ 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 = {
    selectedChoices: ko.observableArray($.map(choices, function (item) {
        return {
            text: item.text,
            value: item.value,
            isSelected : true
            //isSelected: ko.observable($.inArray(item, dataFromServer) !== -1)
        };
    }))
};
/*
viewModel.selectedChoicesDelimited = ko.computed(function () {
    return $.map(this.selectedChoices(), function (item) {
      return item.isSelected() ? item.text : null;
    }).join(",");
}, viewModel);
*/
ko.applyBindings(viewModel);