JSFiddle - React, Tailwind, and code Playground

by rniemeyer

HTML

<script src="http://ajax.aspnetcdn.com/ajax/knockout/knockout-2.2.1.js"></script>
<script src="https://raw.github.com/SteveSanderson/knockout.mapping/master/build/output/knockout.mapping-latest.js"></script>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.min.css">
<script src="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/js/bootstrap.min.js"></script>
<div data-bind="foreach: documents">
    <input type="checkbox" data-bind="attr: { value: documentId }, checked: $root.selectedDocumentIds" />
</div>

<hr/>

<div data-bind="foreach: selectedDocumentIds">
    <span data-bind="text: ko.toJSON($data)"></span>
</div>



<hr/>

<div data-bind="foreach: selectedDocuments">
    <span data-bind="text: ko.toJSON($data)"></span>
</div>

JavaScript

var viewModel = {
    documents: [{"documentId": "2"}, {"documentId": "3"}, {"documentId": "1"}],
    selectedDocumentIds: ko.observableArray()
};

//quick index to make lookup require less looping
viewModel.documentIndex = {};
ko.utils.arrayForEach(viewModel.documents, function(doc) {
   viewModel.documentIndex[doc.documentId] = doc; 
});

//computed to represent an array of the actual objects
viewModel.selectedDocuments = ko.computed(function() {
    return ko.utils.arrayMap(viewModel.selectedDocumentIds(), function(id) {
        return viewModel.documentIndex[id];
    });
});

ko.applyBindings(viewModel);