JSFiddle - React, Tailwind, and code Playground

by Mohammed Ismail Ansari

HTML

<script src="http://ajax.aspnetcdn.com/ajax/knockout/knockout-2.2.1.js"></script>
<div id="listOfPeople" data-bind="foreach: people">
    <div class="person">
        <b><span data-bind="text: name"></span></b><br />
        <span data-bind="text: designation"></span>
        <div class="manager" data-bind="with: manager">
            <u>Manager:</u> <span data-bind="text: name"></span>
        </div>
    </div>
    <br />
</div>

CSS

body
{
    font-family: Arial;
}

JavaScript

// Knockout binding context

// Our viewmodel with observables
function viewmodel() {
    self = this;
    
    this.people = ko.observableArray([
        { name: "Jeff Moreau", designation: "Helmsman", manager: { name: "Commander Shepard" } },
        { name: "Miranda Lawson", designation: "Operative", manager: { name: "Illusive Man" } },
        { name: "Admiral Anderson", designation: "Alliance Admiral", manager: { name: "Ambassador Udina" } }
    ]);
}

// Runs at document load
$(document).ready(function(){
    // Create an instance of the viewmodel
    var myViewmodel = new viewmodel();
    
    // Bind the instance to the view
    ko.applyBindings(myViewmodel);
});