How do I bind multiple class names in Ember 1.13?

Question

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:

http://guides.emberjs.com/v1.13.0/templates/binding-element-class-names/

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

Answer 1

Put quotes around the {{if}} helper:

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

You could also write a helper to do some of the work for you.

For reference, this is mentioned in the 1.11 release blog post.