Bindings

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>, such as value: name.

The Kendo UI MVVM supports binding to other properties as well: source, html, attr, visible, enabled, and others. The data-bind attribute may contain a comma-separated list of bindings, such as data-bind="value: name, visible: isNameVisible". For more information on each Kendo UI MVVM binding, refer to the MVVM bindings articles.

The Bindings is part of Kendo UI for jQuery, a professional grade UI library with 110+ components for building modern and feature-rich applications. To try it out sign up for a free 30-day trial.

Download Free Trial

• Bindings cannot include hard-coded values but only references to properties of the viewModel. For example, the data-bind="visible: false, source: [{ foo: 'bar'}]" configuration is incorrect.
• The data-template attributes cannot contain inline template definitions, but only IDs of external templates.

The Kendo UI MVVM also supports data binding to nested View-Model fields.

<div data-bind="text: person.name">
</div>
<script>
var viewModel = kendo.observable({
    person: {
        name: "John Doe"
    }
});
kendo.bind($("div"), viewModel);
</script>