CODEWITHSUNDEEP
javascriptember.jsember-cli
murli2308
murli2308

Reputation: 2994

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

Upvotes: 0

Views: 300

Answers (2)

murli2308
murli2308

Reputation: 2994

I used the current-when attribute to make the link active.

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

Upvotes: 1

Igor
Igor

Reputation: 1588

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

Upvotes: 2

Related Questions