Why is a redirect function on a route necessary to keep the 'active' state for subpages of that resource?

I posted a question to stack overflow and received a great answer:

I’m curious though as to why it is necessary to create an AboutRoute with:

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

in order to keep the ‘active’ class on subpages of the ‘ABOUT’ resource? When I link directly to ‘about.philosophy’ in the main nav, both the ABOUT in the main nav and the ‘PHILOSOPHY’ in the subnav will be active, as I expected, but when I click on the ‘LEADERSHIP’ link in the subnav – about.leadership – the ABOUT in the main nav loses its active class but the ‘leadership’ link keeps it.

Why does the main ABOUT lose the active class if the url still says ‘/about/leadership’?

Thank you!

Hi,

I’m not sure I follow what you’re saying. Can you explain better what you mean? Take this jsbin as the base. From what I see the about link keeps the active class. and there’s even no need for the redirect there.

When I link ‘about’ in the main navigation to ‘about.philosophy’ instead of just ‘about’ or ‘about.index’, the active class disappears when I click on any of the other subpages in the subnav. The active class works on the ‘about’ link in the main nav, AND on the ‘philosophy’ link in the subnav, but it breaks on any other sub page link in the subnav when i link ‘about’ in the main nav directly to ‘about.philosophy’.

I don’t understand why it does this because the url still says ‘/about/leadership’ or whatever, so I thought ‘leadership’ should still be active, but its not. So I had to add the redirect to keep the active on the subpage links of the subnav when i link ‘about’ directly to another subpage besides the about index.

I know, that sounds insane.