CODEWITHSUNDEEP
ember.jshandlebars.jszurb-foundation
reknirt
reknirt

Reputation: 2254

Ember.js best practices for adding subnav

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

Upvotes: 0

Views: 425

Answers (1)

intuitivepixel
intuitivepixel

Reputation: 23322

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.

Upvotes: 1

Related Questions