JSFiddle - React, Tailwind, and code Playground

by pramodpv

HTML

<script src="https://raw.github.com/SteveSanderson/knockout/master/build/output/knockout-latest.js"></script>
<script src="http://knockoutjs.com/js/jquery.tmpl.js"></script>
<div data-bind="template: { name: 'tmpl-loc', data: MainFeature}"></div>


<script type="text/html" id="tmpl-loc">
    <li>
        <span data-bind="text:Name"></span>
        <ul data-bind="template:{name: 'tmpl-loc', 
                                foreach:DetailFeatures}">
        </ul>
    </li>
</script>

CSS

ul{

    margin-left:40px;
}

JavaScript

var vwMdlPage = {
    MainFeature: ko.observable()
}

function feature(name) {
    this.Name = ko.observable(name);
    this.DetailFeatures = ko.observableArray();
    
}

$(function() {
    /*create dummy data*/
    var mainFeature = new feature("Mast - Software for Tour operators");
        vwMdlPage.MainFeature = mainFeature;
    var quoteDesigner = new feature("Quotation Designer");
    var selectHotels = new feature("select Hotels");
    var selectHouseBoat = new feature("select House Boat");
    var selectPlace = new feature("select Places to visit");  
  
    var accounts = new feature("Accounts");
   var reportsAc = new feature("Financial Reports"); 

    vwMdlPage.MainFeature.DetailFeatures.push(quoteDesigner);
    vwMdlPage.MainFeature.DetailFeatures.push(accounts );
    quoteDesigner.DetailFeatures.push(selectHotels);
    quoteDesigner.DetailFeatures.push(selectHouseBoat );
    quoteDesigner.DetailFeatures.push(selectPlace );    
    accounts.DetailFeatures.push(reportsAc);
    


    /*bind data to the page*/
    ko.applyBindings(vwMdlPage);
});