KnockoutSPA

SPA using knockout

by MaurizioPiccini

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">
        <div id="divbu">
             <h4 data-bind="text: Heading"></h4>

            <ul data-role="listview" data-inset="true" data-bind="foreach: Collection">
                <li data-role="list-divider" data-bind="text: EntityName"></li>
                <li> <a href="#" data-bind="click: $root.fnNextLevel">
                            <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>

      ...

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.EntityName = model[0];
         self.BusinessUnit = model[0];
         self.BusinessPlan = model[1];
         self.Forecast = model[2];
         self.GrossSales = model[3];
     } else if (viewType == 'FEU') {
         self.EntityName = model[1];
         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.EntityName = model[2];
         self.BusinessPlan = model[3];
         self.Forecast = model[4];
         self.GrossSales = model[5];
     }

 }
var Collection= ko.observableArray([]);
 function ShipmentReportsViewModel(results, viewType) {

     var self = this;

     Collection.removeAll();
     
     for (var i = 0; i < results.length; i++) {
         Collection.push(new CommonModel(results[i], viewType));
     }
     if (viewType == 'BU') {
         self.Heading = "Business Units";
         self.fnNextLevel = function (businessUnit) {
             FetchFrontEndUnits(businessUnit);
         };
         self.Home = function () {
             FetchBusinessUnits();
         };

     } else if (viewType == 'FEU') {

         self.Heading = results[0][0];
         self.fnNextLevel = function (frontEndUnit) {
             FetchSalesSegments(frontEndUnit);
         };
         self.Home = function () {
             FetchBusinessUnits();
         };
     } else if (viewType == 'SS') {
         self.fnNextLevel = function () {
             alert('No activity zone');
         };
         self.Heading = results[0][0] + ' - ' + results[0][1];
         self.Home = function () {
             new...