JSFiddle - React, Tailwind, and code Playground

by stevescotthome

HTML

<script src="http://dl.dropbox.com/u/3234184/knockout-2.0.0.js"></script>
<script src="http://dl.dropbox.com/u/3234184/knockout.mapping.js"></script>
<h4 data-bind="text: Clerkship">Loading...</h4>

<ul data-bind="foreach: Campuses">
    <li>
        <span data-bind="text: Campus">Campus</span>
        <ul data-bind="foreach: Rotations">
            <li>
                <span data-bind="text: Rotation">Rotation</span>
                <ul data-bind="foreach: Sites">
                    <li>           
                        <span data-bind="text: Site">Site</span>
                    </li>
                </ul>
            </li>
        </ul>
    </li>
</ul>

CSS

ul{
  padding-left: 20px;   
}
li{
 list-style:disc;   
}

JavaScript

var JSONdataFromServer= '{"Clerkship":"Psychiatry","IsSelective":false,"StartDate":"2012-04-30T11:46:59.9950417-04:00","EndDate":"2012-05-30T11:46:59.9950417-04:00","Campuses":[{"Campus":"Hamilton","Rotations":[{"Rotation":"Psychiatry","Sites":[{"Site":"St. Joes","Min":0,"Max":6,"AvailableToHamilton":false,"Released":true},{"Site":"MUMC","Min":0,"Max":6,"AvailableToHamilton":false,"Released":false}]}]},{"Campus":"Waterloo Regional Campus","Rotations":[{"Rotation":"Psychiatry","Sites":[{"Site":"St. Joes","Min":0,"Max":6,"AvailableToHamilton":false,"Released":true},{"Site":"MUMC","Min":0,"Max":6,"AvailableToHamilton":false,"Released":false}]}]},{"Campus":"Niagara Regional Campus","Rotations":[{"Rotation":"Psychiatry","Sites":[{"Site":"St. Joes","Min":0,"Max":6,"AvailableToHamilton":false,"Released":true},{"Site":"MUMC","Min":0,"Max":6,"AvailableToHamilton":false,"Released":false}]}]}]}';

var dataFromServer = ko.utils.parseJson(JSONdataFromServer);
var viewModel = ko.mapping.fromJS(dataFromServer);

ko.applyBindings(viewModel);