Bind the Container to Extended ObservableObject with Default Values 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 bind a container to an extended ObservableObject with default values in Kendo UI MVVM?
Solution
The following example demonstrates how to achieve the desired scenario. 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.
<div id="form">
<fieldset>
<legend>WORKING:</legend>
<span class="k-input k-textbox k-input-solid k-input-md k-rounded-md k-valid" style="">
<input type="text" data-bind="value: filter.name" data-value-update="keypress" title="value" data-role="textbox" class="k-input-inner" /></span>
<span class="k-input k-textbox k-input-solid k-input-md k-rounded-md k-valid" style="">
<input type="text" data-bind="value: filter.name" data-value-update="keypress" title="value" data-role="textbox" class="k-input-inner" />
</span>
<button type="button" data-bind="events: {click: click}" class="k-button k-button-md k-rounded-md k-button-solid k-button-solid-base">
<span class="k-button-text">this.set("filter.name", "test");</span>
</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>