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:

<ul>
  {{#each item in controller}}
  {{#view App.NavView}}
  {{#linkTo "item" item tagName="li"}}
      <a {{bindAttr href="view.href"}}>
        {{ item.name }}
      </a>
  {{/linkTo}}
  {{/view}}
  {{/each}}
</ul>

Answer 2

baijum's answer above is mostly correct however in the latest versions of Ember the "bind-attr" is deprecated. Here is the new way to write it:

{{#link-to "dashboard" tagName="li"}}
    <a href="{{view.href}}">Dashboard</a>
{{/link-to}}

As you can see, it's even easier and kind of works like magic..

Answer 3

Recently an Ember-cli addon came available to just do this. It is called ember-cli-active-link-wrapper.

Install: ember install ember-cli-active-link-wrapper

You can use it like this:

{{#active-link}}
  {{link-to "Index" "index"}}
{{/active-link}}

which results in:

<li class='active'>
    <a href="/" class='active'>Index</a>
</li>