ember.js - ネストされたルートでアクティブなクラスが機能しない

Question

私の application.hbs ファイルには、アプリケーション全体のナビゲーション バーがあります。

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

ABOUT リンクをクリックすると、サブナビゲーションが表示されます。URL に「about」が含まれている場合は常に表示されます。そのサブナビゲーションには、哲学、リーダーシップ、スタッフなどのサブページがあります。Philosophy は実際には about セクションのインデックス ページです。そのため、ABOUT を about.philosophy にリンクしています。

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

[ABOUT] をクリックすると、ember アプリは想定どおりに /about/philosophy をレンダリングし、サブナビゲーションの [ABOUT] リンクと [philosophy] リンクがアクティブに設定されます。

ただし、[リーダーシップ] をクリックすると、サブナビゲーションのリーダーシップ リンクはアクティブになりますが、メイン ナビゲーションの [ABOUT] リンクは表示されません。

なぜこれを行っているのかわかりません。

私のルーターは次のようになります。

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>