Ember.js best practices for adding subnav - ember.js

Question

I was curious as to what the best way is to implement sub navigation in Ember. In application.hbs I have the main nav with 'about', 'programs', etc. When 'about' is clicked I would like another list of pages to display on the row directly below the main nav. I'm already using {{outlet}} inside of application.hbs so I can't put another where I want the subnav to display.
Here's what I have:
<div class="row left-nav">
{{#linkTo "index"}}<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</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">
// Would like SUBNAV to display here
</div>
</div>
{{outlet}}

Answer 1

You could use a named outlet and hook into the renderTemplate function of your route to render it into the right place, see here for a simple demo. (sorry, but the styles are obviously screwed)
Example if your named outlet is inside your index template then you could:
Index Template
...
<div class="row subnav">
<div class="large-12 colummns">
{{outlet 'subnav'}}
</div>
</div>
...
Subnav template
<script type="text/x-handlebars" id="subnav">
<h2>Hello I'm Subnav!</h2>
</script>
Index Route
App.IndexRoute = Ember.Route.extend({
renderTemplate: function() {
this.render(); // this renders the index template per se
// and this additional call renders the subnav template into the named outlet
this.render('subnav', { //the name of your template
outlet: 'subnav', //the name of the named outlet
into: 'index' //the name of the template where the named outlet should be rendered into
});
}
});
Note, you can have as many named outlet's as you want as long you render them like mentioned above, no matter what route you are in.
Hope it helps.