New to Kendo UI for jQuery? Download free 30-day trial

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">
      <input data-bind="value: quantity" />
      <span data-bind="text: price"></span>
      <span data-bind="text: total"></span>

    var Product ={
      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);

See Also

For detailed information on the bindings Kendo UI MVVM supports, refer to the section about Kendo UI MVVM bindings.

In this article