title: How to create a subnav in ember.js
body: <p>This issue has been stumping me for days. I need a subnav to display under the main nav in the application template when a user visits the 'about' page. I feel like I must be missing some vital concept because I keep reading that if something is extremely hard to do in Ember than you're probably doing it wrong. And I feel like Ember should be able to handle a simple subnav with ease.</p>
  
  <p><img src="https://i.stack.imgur.com/LEew6.png" alt="enter image description here"></p>
  
  <p>I would like the subnav to display on the skinny white horizontal bar below the main nav when "ABOUT" is clicked.</p>
  
  <p>I can't put the subnav in the about template since the nav code is in the application template.</p>
  
  <p>My Router:</p>
  
  <pre><code>App.Router.map(function() {
    this.resource("about", function() {
      this.route("philosophy");
      this.route("leadership");
      this.route("staff");
      this.route("affiliations");
    });
  
    this.route("conditions");
    this.route("programs");
    this.route("testimonials");
  });
  </code></pre>
  
  <p>I can't render a partial inside the application template because I only want it displayed when someone is at the /about url.</p>
  
  <p>I've tried plain old jQuery show and hide with this:</p>
  
  <pre><code>App.ApplicationController = Ember.ObjectController.extend({
    currentRouteChanged: function() {
      if(this.get('currentRouteName').indexOf('about') &gt; -1) {
        $("ul").removeClass("sub-nav-list-hide");
        $("ul").addClass("sub-nav-list-show");
      }
    }.observes('currentRouteName')
  });
  </code></pre>
  
  <p>And it works when you click about, but when you hit the back button or navigate to another page the subnav doesn't hide.</p>
  
  <p>I'm stuck and I feel like I'm making this way too difficult.</p>