murli2308 murli2308 - 1 year ago 108
Javascript Question

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

I have a link with route say

and couple of subroutes as

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

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

I want to make
link active when we are on

Any help would be appreciated.

Code in the Header navbar

<div id="navbar" class="collapse navbar-collapse">
<ul class="nav navbar-nav">
{{#link-to ""}}
{{loc "About"}}

Code in Sidbar

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

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

Answer Source

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

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}}

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download