Binding Element Class Names Edit Page

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

1
2
3

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

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

1
2
3

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

1
2
3

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

If isUrgent is true, this emits the following HTML:

1
2
3

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

If isUrgent is false, no class name is added:

1
2
3

<div>
  Warning!
</div>

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

1
2
3

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

Instead of the dasherized name, this will produce:

1
2
3

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

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

1
2
3

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

1
2
3

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

1
2
3

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

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

1
2
3

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

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

1
2
3

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

Binding Multiple Classes

Unlike other element attributes, you can bind multiple classes:

1
2
3

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

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

1
2
3

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