Old Guides - You are viewing the guides for Ember v1.13.0.
VIEW v3.28.0
Edit Page
Binding Element Class Names
An HTML element's class
attribute can be bound like any other
attribute:
<div class={{priority}}>
Warning!
</div>
If the component's priority
property is "p4"
, this template will emit the following HTML:
<div class="p4">
Warning!
</div>
Conditional Values
If you want a class value based on a conditional property, use the Handlebars if
helper:
<div class={{if isUrgent 'is-urgent'}}>
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>
You can also specify a class name to add when the property is false
:
<div class={{if 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.