Apply Source and Template Binding Using Model with Computed Field
The following example demonstrates how to apply source and template binding by using a Model with a computed field in Kendo UI MVVM.
<div data-bind="source: data" data-template="tmp"></div>
<script id="tmp" type="text/x-kendo-template">
<div>
<input data-bind="value: quantity" />
<span data-bind="text: price"></span>
<span data-bind="text: total"></span>
</div>
</script>
<script>
var Product = kendo.data.Model.define({
fields: {
"quantity": {
type: "number"
},
"price": {
type: "number"
}
},
total: function() { //define the calculated field
return this.get("quantity") * this.get("price");
}
});
var viewModel = kendo.observable({
data: [
new Product({ "quantity": 1, "price": 2 })
]
});
kendo.bind($(document.body), viewModel);
</script>
See Also
- MVVM Overview
- ObservableObject Overview
- Tutorial on How to Build MVVM Bound Forms
- How to Bind Container to Extended ObservableObject with Default Values
For detailed information on the bindings Kendo UI MVVM supports, refer to the section about Kendo UI MVVM bindings.