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
Post a Comment