ember.js - emberjs - how to mark active menu item using router infrastructure

Question

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

<ul class="nav nav-tabs">
    <li class="active"><a href="#">Home</a></li>
    <li><a href="#">Profile</a></li>
    <li><a href="#">Messages</a></li>
</ul>

The active tab is marked with class="active".

There is great example of static navbar and Router/Outlet feature at http://jsfiddle.net/schawaska/pfbva/, but I can't understand how to create a dynamic navbar/menu/tab view.

As far as I understand, it is possible to use class bindings in each menu item:

 classNameBindings: ['isActive:active']

But where is the right place to switch isActive attributes ?

Answer 1

Ember 1.11+:

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

Ember < 1.11 (bind-attr required):

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