JSFiddle - React, Tailwind, and code Playground

by hawaii

HTML

<script src="http://cloud.github.com/downloads/SteveSanderson/knockout/knockout-2.0.0.js"></script>
<script src="http://cloud.github.com/downloads/SteveSanderson/knockout/jquery.tmpl.js"></script>
<script src="https://raw.github.com/SteveSanderson/knockout.mapping/master/build/output/knockout.mapping-latest.js"></script>
<script type="text/html" id="personTemplate">
<li class="item" >
<span class="pCheck"><input type="checkbox" name="checkedPerson" data-bind="checked:$parent.checkedPeople,value:Id"/></span>
<a data-bind="click: $parent.selectPerson(Id())">     
<span class="id" data-bind="text: (Id|| 'No Id'), css: { empty: !Id},"></span>
<span class="name" data-bind="text: (Name|| 'No Name'), css: { empty: !Name}"></span>
    </a>
</li>
</script> 
<ul class="items" data-bind="template: {name: 'personTemplate',foreach: people,}"></ul>


<h2>Logs</h2>
<div id="log"></div>

CSS

ul { text-align: left }
li { padding: 4px; }
li:nth-child(2n) { background-color: #e5e5e5; }

JavaScript

function WriteLog(text) {
    $("#log").append("<span>" + text + "</span><br/>");
}

var peopleData = [{
    "Id": 1,
    "Name": "Person1"},
{
    "Id": 2,
    "Name": "Person2"},
{
    "Id": 3,
    "Name": "Person3"}];
var initialData = {
    people: peopleData
};
var peopleMappingOptions = {
    'people': {
        'key': function(item) {
            return ko.utils.unwrapObservable(item.Id);
        }
    }
};

var viewModel = ko.mapping.fromJS(initialData, peopleMappingOptions);

viewModel.checkedPeople = ko.observableArray([]);
viewModel.checkedPeople.subscribe(function(newValue) {
    WriteLog("Checked people" +newValue);
});

viewModel.selectPerson = function(idx) {
    WriteLog(idx + " is selected, display sth on the right");
};
ko.applyBindings(viewModel);