Edit this page

Bind Container to Extended ObservableObject with Default Values

The example below demonstrates how to bind a container to an extended ObservableObject with default values in Kendo UI MVVM. The model passes the default values to the Observable.fn.init method.

As an alternative, default values can be defined using the Observable.fn.set method.

Example
<div id="form">
    <fieldset>
    <legend>WORKING:</legend>
     <input data-bind="value: filter.name" data-value-update="keypress" />
     <input data-bind="value: filter.name" data-value-update="keypress" />
     <button data-bind="events: {click: click}">this.set("filter.name", "test");</button>
     </fieldset>
</div>
<script>
    $(function() {
      var BaseVM = kendo.data.ObservableObject.extend({
        init: function(values) {
          //Define default values
          var defaultValues = {
            filter: {name: "John Doe"}
          };

          kendo.data.ObservableObject.fn.init.call(this, $.extend({}, defaultValues, values));
        },
        click: function() {
          this.set("filter.name", "test");
        }
      });

      var viewModel2 = BaseVM.extend({});

      kendo.bind($("#form"), new viewModel2());
    });
</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.

Is this article helpful? Yes / No
Thank you for your feedback!

Give article feedback

Tell us how we can improve this article

close
Dummy