← Back to Upcase

Any Ember users here? Trying to get a subnav to render below main nav in rails app


(Jameson Trinker) #1

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.


(Matthew Mongeau) #2

I’d make sure you’re up to date with ember. I tried something like this and it worked:


# application.handlebars
<a {{action showNext}}>Main Nav</a>
{{outlet "sub"}}
{{outlet}}

#router.js.coffee
Embertest.ApplicationRoute = Ember.Route.extend
  actions:                                     
    showNext: ->                               
      @render 'sub_nav',                       
        into: 'application'                    
        outlet: 'sub'

# sub_nav.handlebars
I am a subnav                                                       

This seemed to work just fine.