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: text }, 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

var dataFromServer = "two,four".split(",");
var choices = ["one", "two", "three", "four", "five"];

var viewModel = {
    selectedChoices: ko.observableArray($.map(choices, function (item) {
        return {
            text: item,
            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);