Kendo UI Mobile base
HTML
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://cdn.kendostatic.com/2013.1.514/js/kendo.all.min.js"></script>
<link rel="stylesheet" href="http://cdn.kendostatic.com/2013.1.514/styles/kendo.mobile.all.min.css">
<div data-role="view" id="foo" data-model="vm">
<div data-bind="text: dummy"></div>
<div data-role="button" data-bind="click: changeDummy" >Change Dummy</div>
<div class="group">
<h1>scroller Template</h1>
<div data-bind="source: this" data-template="scrollerTemplate"></div>
</div>
<div class="group">
<h1>scroller Template 2</h1>
<div data-bind="source: itemObject" data-template="scrollerTemplate"></div>
</div>
</div>
<script type="text/x-kendo-template" id="itemTemplate">
#=name#: #=value#
</script>
<script type="text/x-kendo-template" id="scrollerTemplate">
#console.log("rendering scrollerTemplate");#
<div data-role="scrollview">
# for( var i = 0; i< data.items.length; i++) {#<div data-role="page"><div data-bind="source: items[#=i#]" data-template="itemTemplate"></div></div>#}#
</div>
</script>
CSS
.group {
border: 2px solid gray;
margin: 5px;
}
.group h1 {
font-weight: bold;
font-size: 1.3em;
}
.notWorking{
color: red;
}
JavaScript
function refreshScrollViews() {
$(".km-scrollview").each(function() {
$(this).data("kendoMobileScrollView").refresh();
});
}
var vm = new kendo.data.ObservableObject({
dummy: "",
items:[{
name: "item1",
value: "value1"
},{
name: "item2",
value: "value2"
}],
itemObject: {
items:[{
name: "item1",
value: "value1"
},{
name: "item2",
value: "value2"
}]
},
changeDummy: function() {
vm.set("dummy", "something");
refreshScrollViews();
}
});
new kendo.mobile.Application();