Kendo: Router with layout and three views

by mgs_jsfiddle

HTML

<script src="http://cdn.kendostatic.com/2013.1.514/js/kendo.all.min.js"></script>
<div>
    <a href="#/">ROOT</a>
    <a href="#/p1">PAGE-1</a>
    <a href="#/p2">PAGE-2</a>
</div>
<div id="app">
</div>

CSS

a {
    display: inline-block;
    padding: 4px;
    border: 1px solid #d0d0d0;
    color: #000000;
    text-decoration: none;}

#head, #body, #foot {
    padding: 4px;
    margin-top: 10px;
}

#head {
    background-color: #f09999;
}

#body {
    background-color: #99f099;
}

#foot {
    background-color: #9999f0;
}

JavaScript

var layout = new kendo.Layout("<div id='head'></div>" + 
                              "<div id='body'></div>" + 
                              "<div id='foot'></div>");

var router = new kendo.Router();
router.route("/", function() { 
    layout.showIn("#head", new kendo.View("<p>This is the root in head</p>"));
    layout.showIn("#body", new kendo.View("<p>This is the root in body</p>"));
    layout.showIn("#foot", new kendo.View("<p>This is the root in foot</p>"));
});
router.route("/p1", function() { 
    layout.showIn("#head", new kendo.View("<p>This is the page 1 in head</p>"));
    layout.showIn("#body", new kendo.View("<p>This is the page 1 in body</p>"));
    layout.showIn("#foot", new kendo.View("<p>This is the page 1 in foot</p>"));
});
router.route("/p2", function() { 
    layout.showIn("#head", new kendo.View("<p>This is the page 2 in head</p>"));
    layout.showIn("#body", new kendo.View("<p>This is the page 2 in body</p>"));
    layout.showIn("#foot", new kendo.View("<p>This is the page 2 in foot</p>"));
});

layout.render("#app");

router.start();