Asynchronous routes cause wonky link-to behaviour when nested

[markprzepiora]

A pattern I previously used to mark an outer HTML tag as active or not (e.g. an <li> tag) rather than the link itself, is something like this:

  {{#link-to "foo" tagName="li"}}
    {{#link-to "foo"}}
      foo
    {{/link-to}}
  {{/link-to}}

This has worked perfectly fine going back to I think even before 1.0. But this is now broken in 1.11 canary (still works fine in the current 1.10 beta). When the foo route is asynchronous, clicking on it transitions the page perfectly fine, but the active classes are not updated.

The solution is to add bubbles=false to the inner link-tos, like so:

  {{#link-to "foo" tagName="li"}}
    {{#link-to "foo" bubbles=false}}
      foo
    {{/link-to}}
  {{/link-to}}

This is a regression, but is it an expected one? I'm sure that changing the tagName of a link-to isn't exactly an intended API, but I know this is a pattern that's used in the wild, so I just wanted to bring it to your attention.

It should be noted that synchronous transitions to not exhibit this problem.

JSBin here: http://emberjs.jsbin.com/jahuya/5

[rlivsey]

As an aside, ideally there'd be a helper for detecting if a route is active which could be used in a sub-expression here so you wouldn't have to nest link-to's anymore.

Something like:

<li class="{{if (is-current-route "foo") "active"}}>
  {{#link-to "foo"}}foo{{/link-to}}
</li>

It might be easier to implement that helper than fix the link-to regression & make nested link-to's a thing of the past!

[rwjblue]

I use the following technique usually: http://emberjs.jsbin.com/rwjblue/285/edit?html,js,output

[mixonic]

@bantic and I explored and have additional explanation for what is going wrong:

• Nested link-tos cause broken active states (beta, canary) #10662

[alexspeller]

I made an addon with a component for this: https://github.com/alexspeller/ember-cli-active-link-wrapper

[Samsinite]

👍 on the sub-exp idea, that would work great. Could it be used like so with the class name bindings syntax?

<li class="(is-current-route "foo"):active:">{{#link-to "foo"}}foo{{/link-to}}</li>

[rwjblue]

Fixed by #10726.