home
  • Blog
1.10
  • Getting Started
  • Getting Ember
  • Concepts
  • The Object Model
  • Application
  • Templates
    • The Application Template
    • Handlebars Basics
    • Conditionals
    • Displaying a List of Items
    • Binding Element Attributes
    • Binding Element Class Names
    • 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.10.0.
Go to v5.0.0

Binding Element Class Names

Edit pencil

An HTML element's class attribute can be bound like any other attribute:

<div {{bind-attr class="priority"}}>
  Warning!
</div>

If the controller's priority property is "p4", this template will emit the following HTML:

<div class="p4">
  Warning!
</div>

Binding to Boolean Values

If the value to which you bind is a Boolean, Ember.js will apply the dasherized version of the property name as a class:

<div {{bind-attr class="isUrgent"}}>
  Warning!
</div>

If isUrgent is true, this emits the following HTML:

<div class="is-urgent">
  Warning!
</div>

If isUrgent is false, no class name is added:

<div>
  Warning!
</div>

If you want to explicitly provide a class name (instead of Ember.js dasherizing the property name), use the following syntax:

<div {{bind-attr class="isUrgent:urgent"}}>
  Warning!
</div>

Instead of the dasherized name, this will produce:

<div class="urgent">
  Warning!
</div>

You can also specify a class name to add when the property is false:

<div {{bind-attr class="isEnabled:enabled:disabled"}}>
  Warning!
</div>

In this case, if the isEnabled property is true, the enabled class will be added. If the property is false, the class disabled will be added.

This syntax can also be used to add a class if a property is false and remove it if the property is true, so this:

<div {{bind-attr class="isEnabled::disabled"}}>
  Warning!
</div>

Will add the class disabled when isEnabled is false and add no class if isEnabled is true.

Static Classes

If you need an element to have a combination of static and bound classes, you should include the static class in the list of bound properties, prefixed by a colon:

<div {{bind-attr class=":high-priority isUrgent"}}>
  Warning!
</div>

This will add the literal high-priority class to the element:

<div class="high-priority is-urgent">
  Warning!
</div>

Bound class names and static class names cannot be combined. The following example will not work:

<div class="high-priority" {{bind-attr class="isUrgent"}}>
  Warning!
</div>

Binding Multiple Classes

Unlike other element attributes, you can bind multiple classes:

<div {{bind-attr class="isUrgent priority"}}>
  Warning!
</div>

This works how you would expect, applying the rules described above in order:

<div class="is-urgent p4">
  Warning!
</div>
left arrow
Binding Element Attributes
Links
right arrow
On this page

  • Binding to Boolean Values
  • Static Classes
  • Binding Multiple Classes
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