home
  • Blog
2.12
  • Getting Started
  • Tutorial
  • The Object Model
  • Routing
  • Templates
    • Handlebars Basics
    • Built-in Helpers
    • Conditionals
    • Displaying a List of Items
    • Displaying the Keys in an Object
    • Binding Element Attributes
    • Links
    • Actions
    • Input Helpers
    • Development Helpers
    • Writing Helpers
  • Components
  • Controllers
  • Models
  • Application Concerns
  • Testing
  • Ember Inspector
  • Addons and Dependencies
  • Configuring Ember.js
  • Contributing to Ember.js
  • Glossary
Old Guides - You are viewing the guides for Ember v2.12.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>

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

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, helpers and components 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">

To enable support for data attributes an attribute binding must be added to the component, e.g. Ember.LinkComponent or Ember.TextField for the specific attribute:

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

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

Now the same template 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">
left arrow
Displaying the Keys in an Object
Links
right arrow
On this page

  • 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