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:

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

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

• javascript
• ember.js

2 Answers 2

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.

Like many things in frameworks you can do this in multiple ways

1) You can have them both inline

<div class="{{if isTrue 'red' 'blue'}} {{if isAlsoTrue 'bold' 'underline'}}">
    I have both classes
</div>

Some might argue that this on the brink of overwhelming your template with logic. I wouldn't fault you for this way, since it is only two classes, but as you expand your project you may want to consider option 2...

2) You can use use the classNameBindings of a ponent,

<script type="text/x-handlebars" id="ponents/my-cool-dealy">
    <span>I love JSFiddle</span>
</script>


App.MyCoolDealyComponent = Ember.Component.extend({
    classNameBindings: ['category', 'priority'],
    category: function() {
        //logic here
        return "blue";
    }.property(),
    priority: function() {
        //logic here
        return "underline";
    }.property()

});

Here is a JSFiddle of both ways