Binding Test

by grippstick

HTML

<link rel="stylesheet" href="http://babackofficedev.radolo.com/kendo/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://babackofficedev.radolo.com/Kendo/Styles/kendo.flat.min.css">
<script src="http://babackofficedev.radolo.com/Kendo/js/jquery.min.js"></script>
<script src="http://babackofficedev.radolo.com/Kendo/js/kendo.all.min.js"></script>
<div id='container'>
    <div data-bind='text:startTime'></div>
    <div data-bind='text:endTime'></div>
    <ul  data-bind='source:ds1' data-template='ul-template'></ul>    
    
    <script id="ul-template" type="text/x-kendo-template">
    <li>
        id: <span data-bind="text: Name"></span>
    </li>
</script>
</div>

JavaScript

var startTime = new Date().getTime();

function getElapsedTime(){
    var elapsed = (new Date().getTime() - startTime);
    return (elapsed / 1000);
}

function showElapsedTime(title) {
    
    var msg = getElapsedTime() + " : " + title;

    console.warn(msg);
}

showElapsedTime("start everything");


var $container = $('#container');

var vm = new kendo.observable({
    ds1: new kendo.data.DataSource({data:[{Name:"foo1"}, {Name:"bar1"}]})
});


var sTime = getElapsedTime();
kendo.bind($container, vm);
var eTime = getElapsedTime();

vm.set('startTime',sTime);
vm.set('endTime',eTime);