kendo-ui Kendo UI MVVM Basic binding

Example

View :

<form id="form">
    <label>First Name: <input data-bind="value: firstName" /></label>
    <label>Last Name: <input data-bind="value: lastName" /></label>
    <label>Gender:
        <select data-bind="source: genders, value: gender"></select>
    </label>
    <label><input type="checkbox" data-bind="checked: agreed" /> I have read the licence agreement</label>
    <button data-bind="enabled: agreed, click: register">Register</button>
    <div data-bind="visible: confirmed">
        Thank you for your registration, <span data-bind="text: firstName"></span> <span data-bind="text: lastName"></span>
    </div>
</form>

View-model :

var viewModel = kendo.observable({
        firstName: "Arif",
        lastName: "Rahman",
        genders: ["Male", "Female"],
        gender: "Male",
        agreed: false,
        confirmed: false,
        register: function(e) {
            e.preventDefault();

            this.set("confirmed", true);
        }
    });

    kendo.bind($("form"), viewModel);

For demo VISIT JSFIDDLER EXAMPLE

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: firstName. Some bindings were used in the aforementioned example: value, source, visible, enabled and click.

The Kendo UI MVVM supports binding to other properties as well: html, attr etc. The data-bind may contain a comma-separated list of bindings e.g. data-bind="enabled: agreed, click: register".