How do I make the landing page for the about resource 'philosophy.hbs' instead of 'index.hbs' and still keep Ember's 'active' class?

0
votes

My ember router looks like this:

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

In application.hbs I have a nav bar and when you click 'ABOUT' a subnav displays with subpage links. I would like 'ABOUT' to link to 'philosophy.hbs' instead of 'about/index.hbs'. However, when I do this the 'active' class shows up on 'ABOUT' on the main nav, and 'PHILOSOPHY' on the subnav, which is correct. However, as soon as I click on another subpage of about, the 'active' class on 'ABOUT' disappears and only displays on the subnav link.

The only way I can get the 'active' class to always display on the main nav 'ABOUT' is to have an 'about/index.hbs' page. But due to the architecture of the site i really need 'philosophy.hbs' to be the main about landing page and not 'index'

Any ideas why this is breaking the 'active' state, even though the url still reads '/about/leadership', '/about/staff', etc? I would think as long as /about is in the url the active state on that link should be active.

2
javascriptember.js

2 Answers

1
votes

I think you need to add a redirect to the about route which will display the philosophy.hbs

App.AboutRoute = Ember.Route.extend({
  redirect: function(){
    this.transitionTo('about.philosophy');
  }
});

I have a create a jsbin let me know if that works.

Cheers

0
votes

Have you tried specifying the path on your route?

App.Router.map(function() {


this.resource('philosophy', { path: '/about' },  function() {
    this.route('leadership');
    // other routes
  });
});

Does this JSBin capture what you are trying to do? http://jsbin.com/UYIraQO/1/edit