CODEWITHSUNDEEP
ember.jsember-cli
RyanJM
RyanJM

Reputation: 7068

Ember link-to gets active class for the wrong transition

This is one of those Ember issues that I'm unable to replicate anywhere but my project. The visual effect of the problem is that the active class on a link-to is one transition behind. I'll click a link and the link that goes to the page I was just on is highlighted with the active class.

I've started digging into the link-to component code to figure out how active is computed. But it is based on _routing.currentState and I'm not sure what that is. The currentState, and other bits of info, are passed to the routing's isActiveForRoute which then calls the routerState's isActiveIntent. And that function calls another isActiveIntent and compares some more things together. All this seems like a large easter egg hunt for something (the root of my problem) that is probably not in Ember's code anyways.

I feel like the following snippet sums up the problem I'm having. The targetRouteName is the route that is being directed to by the link. _routing.currentRouteName seems to be pointing to the route the browser is currently looking at. The fact these match makes me feel like the link should be active, but the active function returns false.

> link.get('targetRouteName')
"parentRoute.pageA.index”
> link.get('_routing.currentRouteName')
"parentRoute.pageA.index”
> link.get('active')
false

For reference this is after finding the link via the Chrome extension and showing all components. I then did link = $E.

For the wrong link (the one that does get the active class) I get:

> link.get('targetRouteName')
"parentRoute.pageB.index"
> link.get('_routing.currentRouteName')
"parentRoute.pageA.index"
> link.get('active')
"active"

Additional Raw Information

The routes I'm dealing with are nested. But it is a pretty standard nesting, very much like the one I have in my ember-twiddle (e.g. page-a, page-b, page-c).

There is a model hook on the parent route and on the indexs of the children routes. But the children routes reference (this.modelFor(...)) the parent.

My template is referencing the .index of those routes. They are standard link-to components. They do not include model information.

I'm running Ember-cli 1.13.8, Ember 2.0.0, and Ember Data 2.0.0-beta.1.

What I have tried so far

Please Help

I've had this issue for a couple weeks now and I'm not sure where else to look. I'd love any suggestions on how I can resolve this.

Update

This ended up getting fixed in 2.1.0.

Upvotes: 0

Views: 702

Answers (2)

Alexander Suleymanov
Alexander Suleymanov

Reputation: 113

This is common problem when you mess around with willTransition router action. For example,

IMS.ResultDetailsEditRoute = Ember.Route.extend({
    actions: {
        willTransition: function() {
            this.controller.clearForm();
        }
    }    
});

In this code snipped willTransition called controller's method "clearForm()" which no longer exists. For some reason, Ember doesn't throw an error, but it causes the problem that @RyanJM explained.

Upvotes: 1

sbatson5
sbatson5

Reputation: 648

I have run into something similar when using a component with a nav. Here was my approach:

I added a controller (I know, you should be steering away form these, but I needed to). My controller:

import Ember from 'ember';

const {
  Controller,
  inject
} = Ember;

export default Controller.extend({
  application: inject.controller(),
});

Then, in my template, I could pass application to my component.

{{account/account-icon-nav currentRouteName=application.currentRouteName}}

In my component, I set set up a function to test my current route names:

import Ember from 'ember';

const {
  Component,
  computed,
  get
} = Ember;

const activeParentRoute = function(dependentKey, parentRouteName) {
  return computed(dependentKey, {
    get() {
      return get(this, dependentKey).indexOf(parentRouteName) > -1;
    }
  });
};

export default Component.extend({
  isYourProfile: activeParentRoute('currentRouteName', 'account.your-profile'),
  isYourActivity: activeParentRoute('currentRouteName', 'account.your-activity'),
  isYourGoals: activeParentRoute('currentRouteName', 'account.your-goals')
});

Then bind the active class yourself:

<div class="icon-nav md-hidden">
  {{link-to "" "account.your-profile" classBinding=":profile isYourProfile:active" title="Your Life"}}
  {{link-to "" "account.your-activity" classBinding=":activity isYourActivity:active" title="Your Money"}}
  {{link-to "" "account.your-goals" classBinding=":goals isYourGoals:active" title="Your Goals"}}
</div>

I know this is a bit different since we are doing it within a component, but I hope it helps. You can bind these classes yourself by passing the application around.

Upvotes: 0

Related Questions