CODEWITHSUNDEEP
ember.jsember-cli
Goobi
Goobi

Reputation: 47

Link to a child route but have active class on parent route

I have a navbar item 

{{#link-to 'customer'}}

When clicked I want it to route to customer.details route. I can currently achieve this by having the customer route redirect to customer.details. However, when within the customer.details the route, if I click the link-to in the nav it transitions to the customer route instead of sending it to customer.details. None of the route functions like redirect, activate, or before/after model, fire when transitioning up to a route chain.

The other option of 

{{#link-to 'customer.details'}}

would mean that any other customer.routename would not inherit the active class.

Am I missing something? Thanks.

Upvotes: 1

Views: 604

Answers (2)

Goobi
Goobi

Reputation: 47

So a redactor KerrickLong helped me out with this:

Try having the redirect to customer.details live on the customer.index route instead of directly on the customer route.

Works perfectly!

Upvotes: 1

Brandon Martin
Brandon Martin

Reputation: 21

My links were doing this on Ember 2.0, using the solution above from Goobi.

In my router I have:

this.route('event', {path: '/:eventShortName'}, function(){
    this.route('index', {path: '/'});
    this.route('new-article', {path: 'new-article'});
    this.route('page', {path: ':articleTitle'}, function(){
      this.route('data', {path: ':dataId'});
    });
  });

Whenever I visited a event.page.data, all the links in the navbar would be active.

Before fix:

{{#link-to 'event.page' article.articleURL class="nav-dynamic hidden-xs" tagName="li" href=false}}
   {{#link-to 'event.page' article.articleURL }}
      {{article.articleTitle}}
   {{/link-to}}
{{/link-to}}

After fix:

{{#link-to 'event.page.index' article.articleURL class="nav-dynamic hidden-xs" tagName="li" href=false}}
   {{#link-to 'event.page.index' article.articleURL }}
      {{article.articleTitle}}
   {{/link-to}}
{{/link-to}}

The functionality remains the same, now when visiting a data url no links are active.

Upvotes: 2

Related Questions