Full BPOF Country Demo

by Reagan Cooper

HTML

<script src="http://cdn.kendostatic.com/2013.3.1119/js/kendo.all.min.js"></script>
<h2>Welcome to BPOF Country</h2>

<div id="app"></div>

<script id="layout-tmpl" type="text/x-kendo-template">
    <div id="header"></div>
    <div id="breadcrumbs"></div>
    <div id="body"></div>
    <div id="nav"></div>
    <div id="footer"></div>
</script>

<script id="header-tmpl" type="text/x-kendo-template">
    <div>
        Let's get started w/ this Kendo SPA thing.
    </div>
    <br />
    Hey <span data-bind="text: greeting"></span>
</script>

<script id="breadcrumbs-tmpl" type="text/x-kendo-template">
    <div class="breadcrumbWrapper">
        <div id="benefits">Benefits &gt;</div>
        <div id="plans">Plans &gt;</div>
        <div id="options">Options &gt;</div>
        <div id="define">Define &gt;</div>
        <div id="finished">Finished</div>
    </div>
    Current step: <span data-bind="text: currentStep"></span>
</script>

<script id="body-tmpl" type="text/x-kendo-template">
    <div id="benefitTypesList" data-bind="source: benefitTypes" data-template="checkbox-tmpl"></div>
    <div>
        <span data-bind="text: testContent"></span>
    </div>
</script>

<script id="checkbox-tmpl" type="text/x-kendo-template">
    <div>
        <label>
             <input name='benefitTypes' type='checkbox'
                data-bind='checked: selectedTypes, value: value' />
             <span data-bind="text: name" />
        </label>
    </div>
</script>

<script id="benefit-detail-tmpl" type="text/x-kendo-template">
    <div class="benefit-detail" data-bind="source: selectedTypes" 
        data-template="benefit-breakdown-tmpl"></div>
</script>

<script id="benefit-breakdown-tmpl" type="text/x-kendo-template">
    <span class="benefit-name" data-bind="text: value" />
</script>

<script id="nav-tmpl" type="text/x-kendo-template">
    <a href="#/step1">Step 1</a>
    <a href="#/step2">Step 2</a>    
</script>

    <script id="footer-tmpl" type="text/x-kendo-template">
     ...

CSS

a {
    display: inline-block;
    padding: 4px;
    border: 1px solid #d0d0d0;
    color: #000000;
    text-decoration: none;
}
#header, #breadcrumbs, #body, #nav, #footer {
    padding: 4px;
    margin-top: 10px;
}
#header {
    background-color: #f09999;
}
#breadcrumbs {
    background-color: #ae6cd7;
}
#body {
    background-color: #99f099;
}
#nav {
    background-color: #b5c00b;
}
#footer {
    background-color: #6c9bd6;
}
/* From my AddBpof.cshtml mockup */
 .breadcrumbWrapper > div {
    float: left;
    display: inline-block;
    width: 15%;
    border: 1px solid black;
}
#benefitTypesList input {
    float: left;
    display: inline-block;
}
.activeStep {
    background-color: red;
    font-weight: bold;
}
.inactiveStep {
    background-color: white;
    font-weight: normal;
}

JavaScript

/*global $, window */
/*global kendo */
/*global Sbc */
/*global document,SbcKendo*/
/*jslint unparam: true*/
/**
Title:  bpofSpa.js
Description:  model/helpers for BPOF SPA template
*/

// Models / data
var layoutModel = kendo.observable({
    testContent: "Did it work?",
});

var headerModel = kendo.observable({
    greeting: "YOU!",
});

var breadcrumbsModel = kendo.observable({
    currentStep: 0,
});

var bodyModel = kendo.observable({
    selectedTypes: [],
    benefitTypes: [{
        name: "Medical",
        value: "MEDICAL"
    }, {
        name: "Dental",
        value: "DENTAL"
    }, {
        name: "Vision",
        value: "VISION"
    }, {
        name: "ADD / Life",
        value: "ADD_LIFE"
    }, {
        name: "Life (dependent)",
        value: "LIFE_DEPENDENT"
    }, {
        name: "Disability",
        value: "DISABILITY"
    }, {
        name: "Other",
        value: "OTHER"
    }, ],
    testContent: "test Content?",
    listStuff: function () {
        var that = this;

        $(that.selectedTypes).each(function () {
            console.log(this.toString());
        });
    },
});

var footerModel = kendo.observable({
    year: 2014,
});

// Layouts / Views
var layout = new kendo.Layout("layout-tmpl", {
    model: layoutModel
});
var bcView = new kendo.View("breadcrumbs-tmpl", {
    model: breadcrumbsModel
});
var bodyView = new kendo.View("body-tmpl", {
    model: bodyModel
});
var benefitsView = new kendo.View("benefit-checklist-tmpl", {
    model: bodyModel.benefitTypes
});
var benefitsDetailView = new kendo.View("benefit-detail-tmpl", {
    model: bodyModel.selectedTypes
});

var headerView = new kendo.View("header-tmpl", {
    model: headerModel
});
var navView = new kendo.View("nav-tmpl");
var footerView = new kendo.View("footer-tmpl", {
    model: footerModel
});

//Routing
var router = new kendo.Router({
    init: function () {
        layout.render($("#app"));
    }
});

router.route("/", function () {
   ...