How to create a subnav in ember.js

1

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.

I would like the subnav to display on the skinny white horizontal bar below the main nav when “ABOUT” is clicked.

I can’t put the subnav in the about template since the nav code is in the application template.

My Router:

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");
});

I can’t render a partial inside the application template because I only want it displayed when someone is at the /about url.

I’ve tried plain old jQuery show and hide with this:

App.ApplicationController = Ember.ObjectController.extend({
  currentRouteChanged: function() {
    if(this.get('currentRouteName').indexOf('about') > -1) {
      $("ul").removeClass("sub-nav-list-hide");
      $("ul").addClass("sub-nav-list-show");
    }
  }.observes('currentRouteName')
});

And it works when you click about, but when you hit the back button or navigate to another page the subnav doesn’t hide.

I’m stuck and I feel like I’m making this way too difficult.

2

Great answer: javascript - How to create a subnav in ember.js - Stack Overflow

Exactly what I was looking for.