Search code examples
ember.jsember-cli

How to add active class only for exact routes and not parent routes in ember js?

I have two routes which are nested like this.

router.js

this.route('profile', function() {
  this.route('edit');
});

and couple of navbar links for these routes like this..

navbar.hbs

{{#link-to 'profile' tagName="li"}}<a href>View Profile</a>{{/link-to}}
{{#link-to 'profile.edit' tagName="li"}}<a href>Edit Profile</a>{{/link-to}}

The link-to helper adds active class to the li tag here. So when I am in profile route, the first link has active class and when I am in profile.edit route, both the links have active class. (apparently because both the routes get activated when profile.edit is visited.)

How can I avoid the parent route link to get the active class when in a child route?

Basically I don't want the first link (to profile) to have active class when in profile.edit route.

Solution

  • I figured it out if anyone else is facing same issue.

    I just changed the link to profile and made it to explicitly profile.index.

    navbar.hbs

    {{#link-to 'profile.index' tagName="li"}}<a href>View Profile</a>{{/link-to}}
{{#link-to 'profile.edit' tagName="li"}}<a href>Edit Profile</a>{{/link-to}}

    This way, When in profile.edit route, the first link does not get the active class.