Apply Source and Template Binding Using Model with Computed Field

The example below demonstrates how to apply source and template binding by using a Model with a computed field in Kendo UI MVVM.

Example
  <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

Other articles on Kendo UI MVVM:

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

In this article
Not finding the help you need? Improve this article