Want Ember.js named outlet to only display on click

Want Ember.js named outlet to only display on click

I have a subnav close to working properly thanks to the help of
@intuitivepixel. The problem now is that when I load the root, the subnav
is already displaying. The subnav should only be a part of the 'about'
section -- the main nav is:
about conditions programs testimonials
On the index, the root of the app, these are the only links I would like
displayed. But when you click 'about' I would like a subnav to display
right below the main nav with 'about' set as active and the available sub
links as:
philosophy leadership staff affiliations
Then finally when you click on, say 'philosophy', the philosophy template
loads but the 'about' nav is still active, and now the 'philosophy' nav is
active.
application.hbs:
<div class="row left-nav">
<img class="ew_logo" src="assets/ew.png">{{/linkTo}}
</div>
<div class="row nav">
<div class="large-12 colummns">
<ul class="inline-list top-nav">
<li><h6>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">

</div>
</div>
{{outlet}}
application_route.coffee:
Ew.ApplicationRoute = Ember.Route.extend(renderTemplate: ->
@render()
# this renders the application template per se
# and this additional call renders the subnav template into the named
outlet
@render "subnav", #the name of your template
outlet: "subnav" #the name of the named outlet
into: "application" #the name of the template where the named outlet
should be rendered into
)
Thank you!
EDIT
I should also add that I don't want 'subnav' to show up in the url when
'about' is clicked. Sorry for all the questions. Just curious if there an
ember way to do this without hacking a bunch of jquery.