Kendo UI Base

HTML

<link rel="stylesheet" href="http://cdn.kendostatic.com/2013.3.1119/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2013.3.1119/styles/kendo.mobile.all.min.css">
<script src="http://cdn.kendostatic.com/2013.3.1119/js/kendo.all.min.js"></script>
<script type="text/x-kendo-tmpl" id="person-template">
    <a href="\\#person?id=${id}">#:lastName#, #:firstName#</a>
</script>

<div data-role="view" id="people">
  <ul id="ppl-listview" data-role="listview" data-source="app.people" data-template="person-template">
  </ul>
</div>

<div data-role="view" id="person" data-model="app.person.viewModel" data-show="app.person.fetchPerson">
    <div>
        <span data-bind="text: firstName"></span> 
        <span data-bind="text: lastName"></span>
        lives in
    </div>
    <div>
        <span data-bind="text: city"></span>,
        <span data-bind="text: state"></span>
    </div>
    <footer data-role="footer">
        <div data-role="navbar">
            <a class="nav-button" data-align="left" href="#people">Back</a>
        </div>
  </footer>
</div>

<div data-role="layout" data-id="databinding">
    <header data-role="header">
        <div data-role="navbar"> <span data-role="view-title">People</span>
        </div>
    </header>
</div>

JavaScript

(function (global, $) {
    // a in-memory list of people that we'll use in our mocks
	// (this represents the data we'd get if we combined both the
	// call to get a list of people as well as details for each one)
    var people = [{
        lastName: "Holland",
        firstName: "Burke",
        id: 0,
        city : "Nashville",
        state: "Tennessee"
    }, {
        lastName: "Bailey",
        firstName: "Derick",
        id: 1,
        city : "Waco",
        state: "Texas"
    }, {
        lastName: "Cowart",
        firstName: "Jim",
        id: 2,
        city : "Chattanooga",
        state: "Tennessee"
    }, {
        lastName: "VanToll",
        firstName: "TJ",
        id: 3,
        city : "Lansing",
        state: "Michigan"
    }];
    
    // a Kendo datasource for getting a set of people
    var peopleDataSrc = new kendo.data.DataSource({
        data: $.map(people, function(val) {
            return { 
                firstName: val.firstName,
                lastName : val.lastName,
                id       : val.id
            }
        })
    });
    
    // simple function wrapping a call to get a single person
    // (just showing an alternate way than a data source)
    var getPerson = function (id, viewModel) {
        global.app.kapp.showLoading();
        var person = people[id];
        viewModel.set("firstName", person.firstName);
        viewModel.set("lastName", person.lastName);
        viewModel.set("city", person.city);
        viewModel.set("state", person.state);
        global.app.kapp.hideLoading();
    };
    
    // this will be bound to our person view
    var PersonViewModel = kendo.Class.extend({
        init: function () {
            this.viewModel = kendo.observable({
                firstName: null,
                lastName : null,
                city     : null,
                state    : null
            });
        },
        
        fetchPerson : function(e) {
            getPerson( e.view.params.id,...