Attribute Binding

The Kendo UI Attribute (attr) binding populates DOM element attributes from View-Model fields or methods.

This is useful in many cases, such as setting the href and title of a hyperlink, setting the src attribute of an image, etc. If the View-Model fields change, the attributes get updated.

The Kendo UI widgets do not support the attr binding.

Getting Started

To set the attr binding, use the attr: { attribute1: field1, attribute2: field2 } configuration. attribute1 and attribute2 are the names of the attributes that will be set, and field1 and field2 are the names of the View-Model fields to which those attributes will be bound.

The following example demonstrates how to implement the Attribute binding. The src and alt attributes of the image are bound to the View-Model.

<img id="logo" data-bind="attr: { src: imageSource, alt: imageAlt }" />
<script>
var viewModel = kendo.observable({
    imageSource: "http://www.telerik.com/image/kendo-logo.png",
    imageAlt: "Kendo Logo"
});

kendo.bind($("#logo"), viewModel);
</script>

After calling kendo.bind, the image looks in the following way. The data-bind attribute is removed for clarity. Changing the imageSource or imageAlt fields will update the src and alt attributes respectively.

<img id="logo" src="http://www.telerik.com/image/kendo-logo.png" alt="Kendo Logo"" />

Important Notes

  • Binding Attributes: value and checked—To set the value or checked attributes, use the value and checked bindings instead.
  • Setting the HTML5 Data attributes—You can also set HTML5 data attributes through the attr binding.

    <div data-bind="attr: { data-foo: fooValue, data-bar: barValue }"></div>
    
    <script>
    var viewModel = kendo.observable({
        fooValue: "foo",
        barValue: "bar"
    });
    
    kendo.bind($("div"), viewModel);
    </script>
    

See Also

In this article
Not finding the help you need? Improve this article