Question

In Ember.js documentation it states that you can bind attributes to a Boolean value. However when I try to use either of the below and the value is false it does not apply the provided class names.

<div {{bindAttr class="isEnabled:enabled:disabled"}}>
Warning!
</div>

<div {{bindAttr class="isEnabled::disabled"}}>
Warning!
</div>

Is this functionality no longer available?

Answer 1

The functionality is still working, and is not deprecated.

If you can’t make it work, I guess its because you guess isEnabled is a property of the view, but the view rendering context has changed, so you have to write:

<div {{bindAttr class="view.isEnabled:enabled:disabled">Warning!</div>

I suggest you to read the View context changes gist.

The code:

App = Ember.Application.create();

App.FooView = Ember.View.extend({
    templateName: "foo-template"
});​

The template:

<script type="text/x-handlebars">
    The disabled view:
    {{view App.FooView isEnabled=false}}
    <br />
    The enabled view:
    {{view App.FooView isEnabled=true}}
</script>

<script type="text/x-handlebars" data-template-name="foo-template">
    <span {{bindAttr class="view.isEnabled:enabled:disabled"}}>A div</span>
</script>​

And the JSFiddle is here.