Active class not working in nested routes - ember.js

Question

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>

Answer 1

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.