New to Kendo UI for jQuery?
Download free 30-day trial
MVVM Pattern Overview
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 handles the exposing of the data objects from the Model in such a way that those objects are 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.
Important Notes
- The MVVM pattern works only with external templates, thus the CSP compatible templates cannot be used in an MVVM scenario.
- 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 must be created and used instead.<div data-bind="text: person.lowerCaseName"></div> <script> var viewModel = kendo.observable({ person: { name: "John Doe", lowerCaseName: function() { return this.get("name").toLowerCase(); } } }); kendo.bind($("div"), viewModel); </script>
Functionality and Features
-
ObservableObject—All View-Model objects inherit from
kendo.data.ObservableObject. - Forms—You can collect data from HTML forms.
- Inheritance—The MVVM pattern allows you to take advantage of the inheritance from parent classes.
- Bindings—Kendo UI MVVM supports bindings that pair a DOM element (or component) property to a field or method of the View-Model.