Kendo Splitter MVVM

Demo for Kendo Splitter with MVVM kendo observable bind.

HTML

<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css">
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap-theme.min.css">
<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.bootstrap.min.css">
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
<script src="http://cdn.kendostatic.com/2013.3.1119/js/kendo.all.min.js"></script>
<div id="main-pane" data-role="splitter" data-orientation="horizontal" data-panes="[{collapsible: true, size: '250px'},{ collapsible: false },{ collapsible: true, size: '250px' }]">
    <div id="left-pane">
        <div id="navigator-pane" data-role="splitter" data-orientation="vertical" data-panes="[{collapsible:false},{collapsible: true,size:'192px',resizable:false}]">
            <div id="left-top-pane">
                <p>Left Top</p>
            </div>
            <nav id="left-bottom-pane">
                <p>Left bottom</p>
            </nav>
        </div>
    </div>
    <div id="center-pane"><p>Center</p></div>
    <div id="right-pane" style="overflow: visible; z-index: 1;"><p>Right</p></div>
</div>

JavaScript

var vm = kendo.observable({});

kendo.bind($('body'), vm);