bind

Binds a HTML View to a View-Model and initializes Kendo UI widgets from DOM elements based on data-role attributes, similar to kendo.init().

Model View ViewModel (MVVM) is a design pattern which helps developers separate the Model from the View. The View-Model part of MVVM is responsible for exposing the data objects from the Model in such a way that those objects are easily consumed in the View.

Important: Kendo UI Mobile is not included in the default list of initialized namespaces. You can initialize it explicitly by running kendo.bind(element, viewModel, kendo.mobile.ui);

Example - bind a DOM element to a view model

 <!-- View -->
 <div id="view">
   <!-- The value of the INPUT element is bound to the "firstName" field of the View-Model.
   When the value changes so will the "firstName" field and vice versa.  -->
   <label>First Name:<input data-bind="value: firstName" /></label>
   <!-- The value of the INPUT element is bound to the "lastName" field of the View-Model.
   When the value changes so will the "lastName" field and vice versa.   -->
   <label>Last Name:<input data-bind="value: lastName" /></label>
   <!-- The click event of the BUTTON element is bound to the "displayGreeting" method of the View-Model.
   When the user clicks the button the "displayGreeting" method will be invoked.  -->
   <button data-bind="click: displayGreeting">Display Greeting</button>
 </div>
 <script>
   // View-Model
   var viewModel = kendo.observable({
      firstName: "John",
      lastName: "Doe",
      displayGreeting: function() {
          // Get the current values of "firstName" and "lastName"
          var firstName = this.get("firstName");
          var lastName = this.get("lastName");
          alert("Hello, " + firstName + " " + lastName + "!!!");
      }
   });

   // Bind the View to the View-Model
   kendo.bind($("#view"), viewModel);
 </script>

Parameters

element String|jQuery|Element

The root element(s) from which the binding starts. Can be a valid jQuery string selector, a DOM element or a jQuery object. All descendant elements are traversed.

viewModel Object|kendo.data.ObservableObject

The View-Model which the elements are bound to. Wrapped as an instance of kendo.data.ObservableObject if not already.

namespace Object (optional)

Optional namespace to look in when instantiating Kendo UI widgets. The valid namespaces are kendo.ui, kendo.dataviz.ui and kendo.mobile.ui. If omitted kendo.ui will be used. Multiple namespaces can be passed.