Model View ViewModel (MVVM) is a design pattern which helps developers separate the Model, which is the data, from the View, which is the user interface (UI).

The View-Model part of the MVVM is responsible for exposing the data objects from the Model in such a way that those objects are easily consumed in the View. The Kendo UI MVVM component is an implementation of the MVVM pattern which seamlessly integrates with the rest of the Kendo UI framework—Kendo UI widgets and Kendo UI DataSource.

Kendo UI MVVM initialization is not designed to be combined with the Kendo UI server wrappers. Using wrappers is equivalent to jQuery plugin syntax initialization. If you want to create Kendo UI widget instances via the MVVM pattern, then do not use server wrappers for these instances.

Start by creating a View-Model object. The View-Model is a representation of your data (the Model) which will be displayed in the View. To declare your View-Model use the kendo.observable function and pass it a JavaScript object.

Declare a View. The View is the UI, i.e. a set of HTML elements, which will be bound to the View-Model. In the following example, the input value (its text) is bound via the data-bind attribute to the name field of the View-Model. When that field changes, the input value is updated to reflect that change. The opposite is also true: when the value of the input changes, the field is updated. The click event of the button is bound via the data-bind attribute to the displayGreeting method of the View-Model. That method will be invoked when the user clicks the button.

For more information on the naming convention setting the configuration options of the Kendo UI MVVM widgets, check the naming convention for the set data options.

The hybrid widgets and frameworks in Kendo UI are not included in the default list of initialized namespaces. You can initialize them explicitly by running kendo.bind(element, viewModel, kendo.mobile.ui);.

A binding pairs a DOM element (or widget) property to a field or method of the View-Model. Bindings are specified via the data-bind attribute in the form <binding name>: <view model field or method>, e.g. value: name. Two bindings were used in the aforementioned example: value and click.

The Kendo UI MVVM supports binding to other properties as well: source, html, attr, visible, enabled, and other. The data-bind may contain a comma-separated list of bindings e.g. data-bind="value: name, visible: isNameVisible". For more information on each Kendo UI MVVM binding, refer to the MVVM bindings articles.

Bindings cannot include hard-coded values but only references to properties of the viewModel. For example, the data-bind="visible: false, source: [{ foo: 'bar'}]" configuration is incorrect.

Set numeric options as strings. Some Kendo UI widgets accept string options, which represent numbers and can be parsed as such, for example, <input data-role="maskedtextbox" data-mask="09">. This mask will be parsed as a number and the widget will receive a single 9-digit in its initialization method, instead of a "09" string. In such scenarios, the widget options must be set with custom MVVM binding.

Bindings are not JavaScript code. Although bindings look like JavaScript code, they are not. The <div data-bind="text: person.name.toLowerCase()"></div> chunk of code is not a valid Kendo UI MVVM binding declaration. If a value from the View-Model requires processing before displaying it in the View, a method should be created and used instead.

Was this article helpful?

/

Give article feedback

Tell us how we can improve this article

Code samples are inaccurate / outdated.
I expected to find other / more information.
There are typos / broken links / broken page elements.
Content is inaccurate / outdated.
Other
By checking this box you consent to Progress contacting you by email about your response on this page.

Frameworks

Progress, Telerik, and certain product names used herein are trademarks or registered trademarks of Progress Software Corporation and/or one of its subsidiaries or affiliates in the U.S. and/or other countries. See Trademarks for appropriate markings.