Menu
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.
972
Basic Routes. The map() method of your Ember application's router can be invoked to define URL mappings. When calling map() , you should pass a function that will be invoked with the value this set to an object which you can use to create routes.
Here is the explanation: {{outlet}} -> This will provide a stub/hook/point into which you can render Components(Controller + View). One would use this with the render method of routes. In your case you will likely have a details route which could look like this.
A route consistency test takes two different route advertisements to the same destination as input and outputs true if the routes are consistent and outputs false otherwise. Consistency is abstractly defined as follows: If both route announcements are valid then the output is true.
In Ember Data, models are objects that represent the underlying data that your application presents to the user. Note that Ember Data models are a different concept than the model method on Routes, although they share the same name.
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.
187
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With