CODEWITHSUNDEEP
javascriptember.js
alexmngn
alexmngn

Reputation: 9587

Link is set to active in a sub route

I noticed that when I'm in the route forums.archives, my link defined using {{#link-to 'forums'}}Forums{{/link-to}} is set with the class active.

Router.map(function () {
    this.route('forums', function () {
        this.route('new');
        this.route('archives');
    });
});

Navigation:

{{#link-to 'forums'}}Forums{{/link-to}}
{{#link-to 'forums.archives'}}Forum archives{{/link-to}}

Both of them got the active class.

Is there a way to remove the active class on the link if it doesn't match 100% with the url?

Thanks

Upvotes: 0

Views: 38

Answers (1)

GJK
GJK

Reputation: 37369

So you have a nested route, and to be honest, I have no idea how it works. The word from the Ember team is that it works the same as nested resources, but there are a lot of subtleties (like this one) that don't really make sense. So here's what I would do (which might not be what you should do). Assuming that your navigation is in your application template:

App.ApplicationController = Ember.ObjectController.extend({
    isForumsActive: function() {
        return (this.get('currentRouteName') === 'forums');
    }.property('currentRouteName')
});

Then, in your template:

{{#link-to 'forums' active=isForumsActive}}Forums{{/link-to}}
{{#link-to 'forums.archives'}}Forum archives{{/link-to}}

You might also want to change up how your routes so that nesting is a little cleaner:

Router.map(function () {
    this.resource('forums', function () {
        // this.route('index'); -- implicitly defined
        this.route('new');
        this.route('archives');
    });
});

Then your link-to could point to forums.index instead.

Upvotes: 0

Related Questions