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

i'm having issues trying subnav display on click in ember. in application template have nav bar, , @ root have index template full browser width template sitting behind navbar on application template. looks this:

what want happen when 'about' clicked, subnav displays on white horizontal bar directly below main nav. white horizontal bar part of application template. that's thing on page want change though when 'about' clicked. when when click item on subnav, 'staff' renders about.staff template.

my problem getting happen on application template. because if user on 'programs' template, , click about, want user stay on programs template subnav still drop down below 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 tried rendering named outlet in application hbs following applicationroute

ew.applicationroute = ember.route.extend(   rendertemplate: ->     @.render     @.render 'about',         outlet: 'about',         into: 'application' ) 

but i'm getting error:

error while loading route: typeerror {} ember.js?body=1:382 uncaught typeerror: cannot call method 'connectoutlet' of undefined  

i without having hack bunch of jquery it. hope makes sense, appreciate help.

the way i've set sub nav, using sub-nav.hbs template, , subnavcontroller manage active state. render main template this: {{render 'sub-nav'}} write code in subnavcontroller determine links show. hope helps little.

here's subnavcontroller. "wizard" flow, don't want links enabled. (i'm using ember statemanager object manage state of 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 up.  it's little hacky.     ember.logger.debug("current state: " + myapp.statemanager.get('currentstate.name'));     var = 0,         newstates = this.getallstates(),         stateslength = newstates.length,         activeindex = 0;     (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') });