emberjs - how to mark active menu item using router infrastructure

Question

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

Answer 1

Here's a full working solution:

View:

App.NavView = Ember.View.extend({
  tagName: 'li',
  classNameBindings: ['active'],

  active: function() {
    return this.get('childViews.firstObject.active');
  }.property()
});

Template:

  {{#each item in controller}}
  {{#view App.NavView}}
  {{#linkTo "item" item tagName="li"}}
      
        {{ item.name }}
      
  {{/linkTo}}
  {{/view}}
  {{/each}}