murli2308 murli2308 - 4 months ago 45
Javascript Question

Ember js active class not working for nested or sub-routes

I have a link with route say

about
and couple of subroutes as
about.college
and
about.campus
.

Now I have
about
url in header top navigation bar and submenus in sidebar.

When I select any of menu from side bar the active class of
about
in main navigation bar is gets removed.

I want to make
about
link active when we are on
about.campus
or
about.college
route.

Any help would be appreciated.

Code in the Header navbar

<div id="navbar" class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li>
{{#link-to "about.college"}}
{{loc "About"}}
{{/link-to}}
</li>
</ul>
</div>


Code in Sidbar

<div class="content-area leftPanel_stats">
<ul>
<li>{{#link-to 'about.college'}}{{loc 'About College'}}{{/link-to}}</li>
<li>{{#link-to 'about.campus'}}{{loc 'About Campus'}}{{/link-to}}</li>
<ul>
</div>


Now when I am URL in
about.campus
I want header top button to be active

Answer

Your problem is that the about in your header links to "about.college".

If it would link to just "about" route, it would remain active because link-to helper adds active class based on what it routes to.

So what you could do is make about.index route (if you don't have one), and just have it redirect to "about.colege" in i.e model hook. Then you can have the link in your navbar be: {{#link-to "about"}} {{loc "About"}} {{/link-to}}