Use `active` state of `link-to` link outside of the link element

1

The problem is as old as the link-to helper: If one needs to add a class based on wether the link is active or not on the parent element of that link instead of the link element itself, it is necessary to fiddle with the view hierarchy of ember and eventually use private APIs.

Are there plans to improve that? It has gotten quite silent about this here? I can think of several approaches:

  1. Use mutable bindings, i.e. {{link-to model active=foo}} and then in the parent component: classNameBindings: ["active:foo"]
  2. Use ddau to update the property
  3. Provide an easy way to check if one is at the route for a certain model and then simply:
classNameBindings: ["active"],
active: computed("model", function() {
    return this.isAtRouteFor(model);
})
1 Like
2

Ive used this addon to handle it: GitHub - alexspeller/ember-cli-active-link-wrapper: Simple ember-cli link wrapper to propagate active class to parent element