Kendo UI Base

HTML

<script src="https://rawgithub.com/appendto/jquery-mockjax/master/jquery.mockjax.js"></script>
<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"
    }];

    // Mocking an endpoint to get a list of people.
	// Notice we're mapping over our above collection
	// of people to return only what our service would
    $.mockjax({
        url: 'api/people',
        dataType: 'json',
        type: 'GET',
        response: function() {
            this.responseText = $.map(people, function(val) {
                return { 
                    firstName: val.firstName,
                    lastName : val.lastName,
                    id       : val.id
                }
            });
        }
    });
    
    // mocking an endpoint to get one person
    $.mockjax({
        url: /api\/person\/([0-9]{1,4})+/,
        urlParams: ['personId'],
        dataType: 'json',
        type: 'GET',
        response: function(settings) {
            this.responseText = people[settings.urlParams.personId];
        }
    });
    
    // a Kendo datasource for getting a set of people
    var peopleDataSrc = new kendo.data.DataSource({
        transport: {
            read: {
                type: "GET",
                url: "api/people",
                contentType: "application/json; charset=utf-8",
                dataType: "json"
            }
        },
        type: "json"
    });
    
  ...