javascript - How do I bind multiple class names in Ember 1.13? - Stack Overflow

admin管理员组

文章数量:1356949

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

Share Improve this question Follow asked Aug 4, 2015 at 21:00 Kevin BoucherKevin Boucher 16.7k33 gold badges5050 silver badges5757 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 7

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

本文标签： javascriptHow do I bind multiple class names in Ember 113Stack Overflow