Ember.js - having a subnav display on application.hbs on click only without rendering a different template

Question

I'm having issues trying to get a subnav to display on click in Ember. In my application template I have a nav bar, and at the root I have the index template which is a full browser width template sitting behind the navbar on application template. Looks like this:

What I want to happen is when 'ABOUT' is clicked, a subnav displays on the white horizontal bar directly below the main nav. The white horizontal bar is also part of the application template. That's the only thing on the page that I want to change though when 'ABOUT' is clicked. Then when when you click an item on the subnav, say 'STAFF' it renders the about.staff template.

My problem is getting this to happen on the application template. Because if the user is currently on the 'PROGRAMS' template, and then they click about, I want the user to stay on the programs template but the subnav to still drop down below the main nav.

I've tried nested routes:

Ew.Router.map ->
  @.resource "about", ->
    @.route "philosophy"
    @.route "leadership"
    @.route "staff"
    @.route "affiliations"
  @.route "conditions"
  @.route "programs"
  @.route "testimonials"

Then I tried rendering a named outlet in application hbs with the following ApplicationRoute

Ew.ApplicationRoute = Ember.Route.extend(
  renderTemplate: ->
    @.render
    @.render 'about',
        outlet: 'about',
        into: 'application'
)

But I'm just getting an error:

Error while loading route: TypeError {} ember.js?body=1:382
Uncaught TypeError: Cannot call method 'connectOutlet' of undefined 

I would like to do this without having to hack a bunch of jquery into it. I hope this makes sense, I really appreciate any help.

Answer 1

The way I've set up my sub nav, is just using a sub-nav.hbs template, and a SubNavController to manage the active state. I render it from my main template like this: {{render 'sub-nav'}} You could write code in your SubNavController to determine which links to show. Hope this helps a little.

Here's my SubNavController. This is for something like a "wizard" flow, so I don't want all the links to be enabled. (I'm also using an Ember StateManager object to manage the state of my app.)

---

MyApp.SubNavController = Ember.Controller.extend({
  getAllStates: function() {
    return [
      { name: "start", label: "Start", active: true, enabled: true, href: "#/myapp/start"},
      { name: "drivers", label: "Driver", href: "#/myapp/driver"},
      { name: "vehicles", label: "Vehicle", href: "#/myapp/vehicle"},
      { name: "details", label: "Details", href: "#/myapp/details"}
    ];
  },

  init: function() {
    this.set('states', this.getAllStates());
    this.setActive();
  },

  setActive: function() {
    // TODO: Clean this up.  it's a little hacky.
    Ember.Logger.debug("current state: " + MyApp.stateManager.get('currentState.name'));
    var i = 0,
        newStates = this.getAllStates(),
        statesLength = newStates.length,
        activeIndex = 0;
    for (i=0; i< statesLength; i++) {
      newStates[i].active = false;
      if (newStates[i].name===MyApp.stateManager.get('currentState.name')) {
        newStates[i].active = true;
        activeIndex = i;
      }
    }
    for(i=activeIndex; i<statesLength; i++) {
      delete newStates[i].href;
    }
    this.set('states', newStates);
  }.observes('MyApp.stateManager.currentState')
});