Apply Source and Template Bindings by Using Model with Computed Field in MVVM
Environment
| Product | Progress® Kendo UI® MVVM Architecture |
| Operating System | Windows 10 64bit |
| Visual Studio Version | Visual Studio 2017 |
| Preferred Language | JavaScript |
Description
How can I apply source and template binding by using a Model with a computed field in Kendo UI MVVM?
Solution
The following example demonstrates how to achieve the desired scenario.
<div data-bind="source: data" data-template="tmp"></div>
<script id="tmp" type="text/x-kendo-template">
<div>
<label>Quantity</label>
<span class="k-input k-textbox k-input-solid k-input-md k-rounded-md k-valid" style="">
<input type="text" data-bind="value: quantity" title="value" data-role="textbox" class="k-input-inner" style="width: 100%;" />
</span>
<p>
Price:
<span data-bind="text: price"></span>
</p>
<p>
Total:
<span data-bind="text: total"></span>
</p>
</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>