jeudi 8 octobre 2015

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.

What I have tried so far

  • Upgrading to 1.13.0
  • Moving the file structure to pods
  • Removing the functions in my authentication route which a lot of these routes inherit from.
  • Upgrading to 2.0.0
  • Trying to remove/add .index on my routes
  • Tried replicating on ember-twiddle
  • Doing ember init with ember-cli to see if my router or application setup was different from the standard layout and it doesn't differ in any significant way.
  • Adding model information to one of the links, that didn't change anything and since it didn't call the model hooks it messed up the view.
  • Asked on the slack channel

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.

Aucun commentaire:

Enregistrer un commentaire