Kendo MVVM Array Test

by stevescotthome

HTML

<script src="http://cdn.kendostatic.com/2012.1.515/js/kendo.all.min.js"></script>
<script src="http://cdn.kendostatic.com/2012.1.515/styles/kendo.common.min.css "></script>
<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.1.515/styles/kendo.metro.min.css">
<div id="wrapper">
    <div id="elements" data-template="group-template" data-bind="source: pages">
        
    </div>    
</div>

<script id="group-template" type="text/x-kendo-template">
    <h3 data-bind="text: name"></h3>
    <ul data-template="item-template" data-bind="source: sections">
    </ul>
</script>

<script id="item-template" type="text/x-kendo-template">
    <li data-bind="text: url"></li>
</script>

JavaScript

var viewModel = null;

$(document).ready(function () {
    viewModel = kendo.observable({
        pages: [
            { name: "Pages1", sections: [{"url": "/page1.html"}, {"url": "/page2.html"}] },
            { name: "Pages2", sections: [{"url": "/page3.html"}, {"url": "/page4.html"}] },
            { name: "Pages3", sections: [{"url": "/page5.html"}] }
        ]
    });

    kendo.bind($("#wrapper"), viewModel);
});