Question

When I have a template similar to:

{{#view App,NavItemView}}
<li {{bindAttr class="isActive:active"}}>Item 1</li>
{{/view}}

And a view of

App.NavItemView = Ember.View.extend({
  tagName: 'ul',
  isActive: function() {
    return false;
  }
});

The rendered template will always render the class of ‘active’ on the li element. So based upon this it doesn’t seem possible to have a conditional class set?

Ideally I would like the class of the li element to be turned on and off based upon the result of the function. Am I missing something?

Answer 1

You need to use computed properties for this sort of thing.

App.NavItemView = Ember.View.extend({
  tagName: 'ul',
  isActive: function() {
    return false;
  }.property()
});

Check out the computed properties guide for more details.