ember: How do I bind multiple class names in Ember 1.13?

mardi 4 août 2015

With the deprecation of bind-attr in favor of handlebar if statements for class name binding; how do I bind multiple class names to an element?

The documentation specifies the syntax for a single bound class name but not multiple:

<div class={{if isEnabled 'enabled' 'disabled'}}>
    Warning!
</div>

Which results in (when isEnabled=true):

<div class="enabled"}}>
    Warning!
</div>

But what if I need to bind other class names to this element? I've tried:

<div class={{if isEnabled 'enabled' 'disabled'}}{{if isNew 'new' 'old'}}>
    Warning!
</div>

and (with and without the semicolon) ...

<div class={{if isEnabled 'enabled' 'disabled'; if isNew 'new' 'old'}}>
    Warning!
</div>

The first is last-in wins and the second doesn't even compile.

ember