JSFiddle - React, Tailwind, and code Playground

by shyamayana

HTML

<script src="http://learn.knockoutjs.com/Scripts/Lib/knockout-2.2.0.js"></script>
<div data-role="page" data-theme="c">
    <div data-role="header" data-position="inline" class="ui-header ui-bar-c" role="banner">
         <h1>Company</h1>

    </div>
    <div data-role="content" data-theme="c">
         <h4 data-bind="text: Heading"></h4>

        <div id="divbu">
            <ul data-role="listview" data-inset="true" data-bind="foreach: BusinessUnits">
                <li data-role="list-divider" data-bind="text: BusinessUnit"></li>
                <li> <a href="#" data-bind="click: $root.fnFeu">
                <table border="0">
                    <tr>
                        <td>
                            <label style="font-size: 12px;">Bus. Plan: </label>
                        </td>
                        <td>
                            <label style="font-size: 12px;" data-bind="text: BusinessPlan"></label>
                        </td>
                        <td>
                            <label style="font-size: 12px;">Forecast: </label>
                        </td>
                        <td>
                            <label style="font-size: 12px;" data-bind="text: Forecast"></label>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <label style="font-size: 12px;">Gross Sales: </label>
                        </td>
                        <td colspan="3">
                            <label style="font-size: 12px;" data-bind="text: GrossSales"></label>
                        </td>
                    </tr>
                </table>
            </a>

                </li>
            </ul>
        </div>
        <div id="divfeu">
            <ul data-role="listview" data-inset="true" data-bind="foreach: FrontEndUnits">
                <li data-role="list-divider" data-bind="text: FrontEndUnit"></li>
                <li> <a href="#" data-bind="click:...

JavaScript

var BU = [
    ['BU1', 12.12, 22.23, 13.56],
    ['BU2', 13.12, 23.23, 19.56],
    ['BU3', 14.12, 24.23, 18.56],
    ['BU4', 15.12, 25.23, 17.56],
    ['BU5', 16.12, 26.23, 16.56]
];

function CommonModel(model, viewType) {
    var self = this;
    if (viewType == 'BU') {
        self.BusinessUnit = model[0];
        self.BusinessPlan = model[1];
        self.Forecast = model[2];
        self.GrossSales = model[3];
    } else if (viewType == 'FEU') {
        self.BusinessUnit = model[0];
        self.FrontEndUnit = model[1];
        self.BusinessPlan = model[2];
        self.Forecast = model[3];
        self.GrossSales = model[4];
    } else if (viewType == 'SS') {
        self.BusinessUnit = model[0];
        self.FrontEndUnit = model[1];
        self.SalesSegment = model[2];
        self.BusinessPlan = model[3];
        self.Forecast = model[4];
        self.GrossSales = model[5];
    }

}

function ShipmentReportsViewModel(results, viewType) {
    var self = this;
    self.Heading = ko.observable();
    self.BusinessUnits = ko.observableArray();
    self.FrontEndUnits = ko.observableArray();
    self.SalesSegments = ko.observableArray();

    self.Home = function () {
        var bu = FetchBusinessUnits();
        self.Heading("Business Units");
        self.BusinessUnits(bu);
        self.FrontEndUnits(null);
        self.SalesSegments(null);
    };
    self.fnFeu = function (businessUnit) {
        var feu = FetchFrontEndUnits(businessUnit);
        self.Heading(feu[0].BusinessUnit);
        self.FrontEndUnits(feu);
        self.BusinessUnits(null);
        self.SalesSegments(null);
    };
    self.fnSalesSeg = function (frontEndUnit) {
        var ss = FetchSalesSegments(frontEndUnit);
        self.Heading(ss[0].BusinessUnit + ' - ' + ss[0].FrontEndUnit);
        self.SalesSegments(ss);
        self.BusinessUnits(null);
        self.FrontEndUnits(null);
    };
    self.Home();
}

$(function () {
    //FetchBusinessUnits();
    ko.applyBindings(new...