javascript - Binding classes to a div in ember - Stack Overflow

admin管理员组

文章数量:1290959

I want to bind classes to a div based on a dynamic value in ember; it should hide the DOM element when it is false and add two classes to it when the value is true.

Here is my code:

<div {{bindAttr class="App.User.isLoggedIn:alert alert-error:hide" }} >
    ...
</div>

However the bindings don't work and it keeps showing the div even when app.User.isLoggedIn is false.

How do you bind multiple classes based on a true condition?

I want to bind classes to a div based on a dynamic value in ember; it should hide the DOM element when it is false and add two classes to it when the value is true.

Here is my code:

<div {{bindAttr class="App.User.isLoggedIn:alert alert-error:hide" }} >
    ...
</div>

However the bindings don't work and it keeps showing the div even when app.User.isLoggedIn is false.

How do you bind multiple classes based on a true condition?

• javascript
• ember.js

Share Improve this question Follow asked Dec 2, 2012 at 5:13 AbdulFattah PopoolaAbdulFattah Popoola 94722 gold badges1313 silver badges2222 bronze badges 3

• 2 you'd have to show some more code so we can assist you or you can create a fiddle at jsfiddle. Here's a starting template: jsfiddle/pangratz666/DvdVH – MilkyWayJoe Commented Dec 2, 2012 at 13:38
• for multiple classes u shld try obeservers..will help if u have a fiddle for this.. – thecodejack Commented Dec 3, 2012 at 6:23
• Definitely don't think that observers are the way to go here (sorry CodeJack). You're referencing alertError. Is that a property in your view or something? Post code if you want us to help. – Drew Commented Dec 5, 2012 at 11:04

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 7

So, to get a mix of bound attributes (in your case, class names), you can list separate the binding criteria with spaces.

Basically, in your {{bindAttr ...}} helper, you can write boundAttr="criterion1 criterion2 criterion3", where the individual binding criterion expand out to the following format:

Property substitution

propertyName

This stubs in classNames with two different behaviours:

1. if the property value is a boolean: the dasherized property name
2. if the property value is a string: the string value

Static class/Always true:

:className

Always adds the classname to the div.

Conditional on an property:

propertyName:trueClass 
propertyName:trueClass:falseClass 
propertyName::falseClass

Evaluates the property, and assigns the appropriate class based on truthy/falsy values.

In your case, since you want to have two classes hanging off the same property, you could do:

<div {{bindAttr class="App.User.isLoggedIn:alert App.User.isLoggedIn:alert-error:hide"}} >
    ...
</div>

Note the spaces here. The first criterion takes care of just the alert class, while the second takes care of the 'alert-error' or 'hide' classes accordingly.

If you wanted something even simpler, you could have a calculated property that determines the string you need to apply in your view or model.

Then you could do

// in your view
classesNeeded: function() {

   return App.User.get('isLoggedIn') ? 'alert alert-error' : 'hide';

}.property('App.User.isLoggedIn')

And then:

<div {{bindAttr class="view.classesNeeded"}} >
        ...
    </div>

In the hypothetical case where you needed a third, default class for all cases, you could do:

<div {{bindAttr class=":defaultClass view.classesNeeded"}} >
        ...
    </div>

You can read up more on attribute and class bindings in the new ember.js doc, here: http://emberjs./guides/templates/binding-element-class-names/

Try using classNameBindings instead. You can add or remove style classes according to the state of properties of your choice

For instance, here's an exmaple from Emberjs documentation:

// Applies no class when isEnabled is true and class 'disabled' when isEnabled is false
Ember.View.create({
  classNameBindings: ['isEnabled::disabled']
  isEnabled: true
});

Will result in view instances with an HTML representation of:

<div id="ember1" class="ember-view"></div>

When the isEnabled property on the view is set to false, it will result in view instances with an HTML representation of:

<div id="ember1" class="ember-view disabled"></div>

本文标签： javascriptBinding classes to a div in emberStack Overflow