New to Kendo UI for jQuery? Start a free 30-day trial

Bind

methods

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.

bind

Parameters:elementString|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.

viewModelObject|kendo.data.ObservableObject

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

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