emberjs - how to mark active menu item using router infrastructure

Question

I\'m trying to create navigation tabs (taken from Twitter Bootstrap):

Answer 1

If you're using Ember >= 1.11, then https://stackoverflow.com/a/14501021/65542 below is the correct answer.

---

I would create a NavigationView, see http://jsfiddle.net/pangratz666/z8ssG/:

Handlebars:

JavaScript:

App.NavigationView = Em.View.extend({
    templateName: 'navigation',
    selectedBinding: 'controller.selected',
    NavItemView: Ember.View.extend({
        tagName: 'li',
        classNameBindings: 'isActive:active'.w(),
        isActive: function() {
            return this.get('item') === this.get('parentView.selected');
        }.property('item', 'parentView.selected').cacheable()
    })
});

And inside your route's connectOutlets you have to set the current navigation item via router.set('navigationController.selected', 'home'); ...

---

Also take a look at the ember-bootstrap repository, which wraps this and more features of Bootstrap inside Ember.js