Integration with Kendo UI MVVM
The Kendo UI hybrid mobile Application provides a close integration with the Kendo UI MVVM framework. The mobile widgets' configuration options can be bound and managed through a view model.
Getting Started
Initialization
The recommended way to use the Kendo UI MVVM with the Hybrid UI Application is through the model configuration option of the mobile view.
<script>
var foo = { bar: "baz" }
</script>
<div data-role="view" data-model="foo">
<span data-bind="text:bar"></span>
</div>
A complex model reference can also be specified.
<script>
var foo = {
bar: { baz: "qux" }
}
</script>
<div data-role="view" data-model="foo.bar">
<span data-bind="text:baz"></span>
</div>
MVVM Binding
When initialized, the mobile View calls kendo.bind on its child elements, using the provided model.
Important
The mobile View binds all Kendo UI widgets—hybrid mobile and web widgets as well as the controls for data visualization—in that same order. This means that if an element with
data-role="listview"is present, a hybrid mobile (and not web) ListView is going to be initialized. This behavior can be overridden by specifying the full widget class name, together with its namespace, in theroleattribute.
As of the Kendo UI Q2 2014 release, the mobile view events may be bound to the view model, too, as demonstrated in the example below.
<script>
var foo = {
onViewInit: function(e) {
console.log(e);
},
onViewShow: function(e) {
console.log(e);
}
};
</script>
<div data-role="view" data-model="foo" data-bind="events: { init: onViewInit, show: onViewShow }>
<span data-bind="text:bar"></span>
</div>