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. Note: Although the approach was working with older Kendo UI for jQuery versions, with the CSP compliance improvements introduced with the 2023 R1 release, the approach could not be used.

  <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>
  

• Initializing components' properties by passing JSON as string to the DOM results in unsafe HTML and is not recommended. The better practise is to pass the properties to the Observable Objects.

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.

Next Steps

• Getting Started with the MVVM Pattern

See Also

• jQuery Forums
• jQuery Blog
• jQuery Videos
• jQuery Roadmap
• jQuery Pricing
• jQuery Training