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

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>

See Also

In this article