home
  • Blog
1.11
  • Getting Started
  • Concepts
  • The Object Model
  • Application
  • Templates
    • The Application Template
    • Handlebars Basics
    • Conditionals
    • Displaying a List of Items
    • Binding Element Attributes
    • Links
    • Actions
    • Input Helpers
    • Development Helpers
    • Rendering with Helpers
    • Writing Helpers
  • Routing
  • Components
  • Controllers
  • Models
  • Views
  • Enumerables
  • Testing
  • Configuring Ember.js
  • Cookbook
  • Understanding Ember.js
  • Contributing to Ember.js
Old Guides - You are viewing the guides for Ember v1.11.0.
Go to v5.0.0

Binding Element Attributes

Edit pencil

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 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>

Binding multiple values

You can also bind multiple values to a single attribute:

<div class="{{priority}} {{placement}}"></div>

Binding boolean values

If you use data binding with a Boolean value, it will add or remove the specified attribute. For example, given this template:

<input type="checkbox" disabled={{isAdministrator}}>

For further control over how these values are applied, see the inline-if syntax documentation on the Conditionals page.

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:

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

export default 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:

export default 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.

left arrow
Displaying a List of Items
Links
right arrow
On this page

  • Binding multiple values
  • Binding boolean values
  • Adding data attributes
Team Sponsors Security Legal Branding Community Guidelines
Twitter GitHub Discord Mastodon

If you want help you can contact us by email, open an issue, or get realtime help by joining the Ember Discord.

© Copyright 2023 - Tilde Inc.
Ember.js is free, open source and always will be.


Ember is generously supported by
blue