Old Guides - You are viewing the guides for Ember v1.10.0.

Binding Element Attributes

In addition to normal text, you may also want to have your templates contain HTML elements whose attributes are bound to the controller.

For example, imagine your controller has a property that contains a URL to an image:

<div id="logo">
  <img {{bind-attr src=logoUrl}} alt="Logo">
</div>

This generates the following HTML:

<div id="logo">
  <img src="http://www.example.com/images/logo.png" alt="Logo">
</div>

If you use {{bind-attr}} with a Boolean value, it will add or remove the specified attribute. For example, given this template:

<input type="checkbox" {{bind-attr disabled=isAdministrator}}>

If isAdministrator is true, Handlebars will produce the following HTML element:

<input type="checkbox" disabled>

If isAdministrator is false, Handlebars will produce the following:

<input type="checkbox">

Adding data attributes

By default, view helpers do not accept data attributes. For example

{{#link-to "photos" data-toggle="dropdown"}}Photos{{/link-to}}

{{input type="text" data-toggle="tooltip" data-placement="bottom" title="Name"}}

renders the following HTML:

<a id="ember239" class="ember-view" href="#/photos">Photos</a>

<input id="ember257" class="ember-view ember-text-field" type="text" title="Name">

There are two ways to enable support for data attributes. One way would be to add an attribute binding on the view, e.g. Ember.LinkView or Ember.TextField for the specific attribute:

Ember.LinkView.reopen({
  attributeBindings: ['data-toggle']
});

Ember.TextField.reopen({
  attributeBindings: ['data-toggle', 'data-placement']
});

Now the same handlebars code above renders the following HTML:

<a id="ember240" class="ember-view" href="#/photos" data-toggle="dropdown">Photos</a>

<input id="ember259" class="ember-view ember-text-field" 
       type="text" data-toggle="tooltip" data-placement="bottom" title="Name">

You can also automatically bind data attributes on the base view with the following:

Ember.View.reopen({
  init: function() {
    this._super();
    var self = this;

    // bind attributes beginning with 'data-'
    Em.keys(this).forEach(function(key) {
      if (key.substr(0, 5) === 'data-') {
        self.get('attributeBindings').pushObject(key);
      }
    });
  }
});

Now you can add as many data-attributes as you want without having to specify them by name.

Adding data attributes