ember.js - How can I keep the main navigation highlighted while navigating to different sub/sibling pages? -

how can keep main navigation highlighted while navigating different sub/sibling pages? app has sibling pages shared sub navigation:

window.app = ember.application.create();  app.router.map(function() {     this.resource('charts', {path: 'charts'}, function(){         this.resource('chart-index', {path: 'index'});         this.resource('chart-archive', {path: 'archive'});     }); }); 

my templates:

<script type="text/x-handlebars">     <div>         {{#link-to "chart-index" class="tab-item"}}             charts         {{/link-to}}     </div>     {{outlet}} </script> <script type="text/x-handlebars" id="charts">     <div>         {{#link-to 'chart-index' class="control-item"}}             latest chart         {{/link-to}}         {{#link-to 'chart-archive' class="control-item"}}             chart archive         {{/link-to}}     </div>     {{outlet}} </script> <script type="text/x-handlebars" id="chart-index">     index </script> <script type="text/x-handlebars" id="chart-archive">     archive </script> 

but since main navigation link chart-index, looses highlighting when hit chart-archive. jsfiddle: http://jsfiddle.net/kitsunde/mmykp/1/

not sure need link index route directly. should able link parent resource charts directly , ember auto route chartsindex route.

from the docs:

transitioning posts or creating link posts equivalent transitioning posts.index or linking posts.index

haven't tested should ensure "active" class applied.