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.


Comments

Popular posts from this blog

How to access named pipes using JavaScript in Firefox add-on? -

multithreading - OPAL (Open Phone Abstraction Library) Transport not terminated when reattaching thread? -

node.js - req param returns an empty array -