Kendo UI SPA + Router: SHOW ME TEH KITTEHS!

Kitteh Gallereh Router and selecting an image

by LeeMellinger

HTML

<link rel="stylesheet" href="http://cdn.kendostatic.com/2013.1.319/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2013.1.319/styles/kendo.default.min.css">
<script src="http://cdn.kendostatic.com/2013.1.319/js/kendo.all.min.js"></script>
<!-- define a template for the layout -->
<script id="layout-template" type="text/x-keno-template">
  <h1>Muh Kittehz!</h1>
  <div id="kitteh-list"></div>
  <div id="kitteh"></div>
  <p>Teh kittehs are the bestest! I want to hug them all!</p>
</script>

<!-- define templates for all the views -->

<script id="kitteh-list-template" type="text/x-kendo-template">
    <div data-role="listview" data-bind="source: imageSource, events: {change: imageClicked}" data-selectable="true" data-template="kitteh-list-item-template"></div>
</script>

<script id="kitteh-list-item-template" type="text/x-kendo-template">
    <img data-bind="attr: {src: url}" height="100" width="150" />
</script>

<script id="kitteh-view-template" type="text/x-keno-template">
    <h3 data-bind="text: name"></h3>
    <img data-bind="attr: {src: url}" />
</script>

<!-- a div to place everything in to the page -->
<div id="main"></div>

JavaScript

var router, layout, kittehModel;

// View-Model And DataSource
// -------------------------

// a list of kittehz in to the "#kitteh-list" element
var kittehSource = new kendo.data.DataSource({
  data: [
    {id: 1, name: "Fuzzball", url: "http://placekitten.com/300/200"},
    {id: 2, name: "Kitteh", url: "http://placekitten.com/301/200"},
    {id: 3, name: "Nuther", url: "http://placekitten.com/300/201"},
    {id: 4, name: "Cutezee", url: "http://placekitten.com/301/201"}
  ],
      
  schema: {
    model: { id: "id", fields: { url: "string" } }
  }
});

// observable view-model
kittehModel = kendo.observable({
    name: "Fuzzball",
    url: "http://placekitten.com/300/200",
    imageSource: kittehSource,
    
    showById: function(id){
        // get the image by id
        var image = this.imageSource.get(id);
        // show the specified image
        this.showImage(image);
    },
    
    showImage: function(image){
        // update the model's attributes
        // causing the view to update, through
        // the use of data binding
        this.set("name", image.get("name"));
        this.set("url", image.get("url"));
    },
        
    imageClicked: function(e){
        // get the selected image
        var index = e.sender.select().index();
        var image = this.imageSource.view()[index];
        
        // show the image that was found
        this.showImage(image);
        
        // update the browser's URL / hash route
        router.navigate("/images/" + image.get("id"), false);
    }
});

// Views
// -----

// render a layout in to the "#main" element
layout = new kendo.Layout("layout-template");
layout.render("#main");

// define a list view and show the list of images
var kittehListView = new kendo.View("kitteh-list-template", {
  model: kittehModel
});
layout.showIn("#kitteh-list", kittehListView);

// show a single kitty image 
var kittehView = new kendo.View("kitteh-view-template", {
    model:...