CODEWITHSUNDEEP
ember.js
reknirt
reknirt

Reputation: 2254

Active class not working in nested routes

In my application.hbs file I have an application wide nav bar.

<div class="row nav">
<div class="large-12 colummns">
    <ul class="inline-list top-nav">
            <li><h6>{{#linkTo "about.philosophy"}}ABOUT{{/linkTo}}</h6></li>
            <li><h6>//</h6></li>
            <li><h6>CONDITIONS</h6></li>
            <li><h6>//</h6></li>
            <li><h6>PROGRAMS</h6><li>
            <li><h6>//</h6></li>
            <li><h6>TESTIMONIALS</h6></li>
   </ul>
</div>
</div>
<div class="row subnav">
    <div class="large-12 colummns">
      {{#if renderAboutSubNav}}
        {{render 'about/subnav'}}
      {{/if}}
  </div>
</div>
{{outlet}}

subnav.hbs:

<ul class="inline-list subnav-list">
  <li class="subnav-item">{{#linkTo "about.philosophy"}}philosophy{{/linkTo}}</li>
  <li class="subnav-item">//</li>   
  <li class="subnav-item">{{#linkTo "about.leadership"}}leadership{{/linkTo}}</li>
  <li class="subnav-item">//</li> 
  <li class="subnav-item">staff</li>
</ul>

The ABOUT link, when clicked, displays a subnav -- displayed whenever the url contains 'about'. In that subnav are about subpages -- philosophy, leadership, staff. Philosophy is actually the index page of the about section, which is why I am linking ABOUT to about.philosophy:

{{#linkTo "about.philosophy"}}ABOUT{{/linkTo}}

When I click ABOUT, the ember app renders /about/philosophy as it is supposed to, and the ABOUT link and philosophy link in the subnav are set to active.

However, when I click 'Leadership' the leadership link on the subnav is active but not the ABOUT link in the main nav, even though the url reads /about/leadership.

I don't understand why it is doing this.

My router looks like this:

Ew.Router.reopen(location: 'history')

Ew.Router.map ->
@.resource "about", ->
    @.route "philosophy"
    @.route "leadership"
    @.resource "staff"
@.route "conditions"
@.route "programs"
@.route "testimonials"

about.hbs:

<div class="row about-bg">
<div class="large-12 columns">
    <div class="row">
        <h1 class="about-phil">Eskridge & White</h1>
  </div>
</div>
</div>
<div class="row philosophy-content">
<div class="large-9 columns about-us">
{{outlet}}
</div>
</div>
<div class="large-3 columns sidebar">
    {{partial 'sidebar'}}
</div>
</div>

Upvotes: 0

Views: 918

Answers (1)

Hyder
Hyder

Reputation: 1463

The problem here is you are linking to about.philosophy, so when you navigate to about.leadership active class won't be applied.

So make your link-to to point about route,
{{#link-to "about"}}ABOUT{{/link-to}}

And from your about.index route, redirect to about.philosophy route,
so that active class will be always applied to about's link-to whenever you are in the child of about route.

A bin for your case.

Upvotes: 4

Related Questions