CODEWITHSUNDEEP
javascriptember.jshandlebars.js
reknirt
reknirt

Reputation: 2254

How to create a subnav in ember.js

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.

enter image description here

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.

Upvotes: 3

Views: 362

Answers (2)

seenivasan
seenivasan

Reputation: 186

That looks elegant to me!

We can do in application controller something similar.

App.ApplicationController=Ember.Controller.extend({
    renderAboutSubNav:function(){
        var reg = new RegExp("^about\.");
        return reg.test(this.get('currentPath'));
     }.property('currentPath')

});

Upvotes: 2

dierbro
dierbro

Reputation: 156

I would set a property in the application controller from within App.AboutRoute

App.AboutRoute = Ember.Route.extend({
  activate: function(){
    this.controllerFor('application').set('renderAboutSubNav', true);
  },
  deactivate: function(){
    this.controllerFor('application').set('renderAboutSubNav', false);
  }
});

and then check the property in the application template.

{{#if renderAboutSubNav}}
  {{render 'about/subnav'}}
{{/if}}

Here is an example jsbin

Upvotes: 4

Related Questions