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.

html

<img id="logo" data-bind="attr: { src: imageSource, alt: imageAlt }" />
<script>
var viewModel = kendo.observable({
    imageSource: "https://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.

html

<img id="logo" src="https://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.

  html

    <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

• MVVM Overview
• Overview of the Checked Binding
• Overview of the Click Binding
• Overview of the CSS Binding
• Overview of the Custom Binding
• Overview of the Disabled Binding
• Overview of the Enabled Binding
• Overview of the Events Binding
• Overview of the HTML Binding
• Overview of the Invisible Binding
• Overview of the Source Binding
• Overview of the Style Binding
• Overview of the Text Binding
• Overview of the Value Binding
• Overview of the Visible Binding