EmberJS - How to dynamically generate link with linkTo?

Question

Is there a way to dynamically generate a link using the link-to helper by passing a variable with the route path?

For example, instead of hard coding the path like this:

{{#linkTo "route.subroute" model}}{{model.title}}{{/linkTo}}

I want to be able to pass the link-to helper a variable which holds the path like this:

{{#linkTo destination model}}{{model.title}}{{/linkTo}}

The use case for this is to allow me to consolidate templates which only differ by this path. For instance, if there are two collections each with a different destination. When rendered with the each helper the templates are the same except for the path in the link-to.

If I could save this variable in the view’s controller and pass it, I could use only one template for both the lists.

I have thought about manually constructing the path like this:

<a {{bindAttr href="destination"}}>{{model.title}}</a>

But this does not have the integration with the router to determine the active state which I need.

Answer 1

Is there a way to dynamically generate a link using the linkTo helper by passing a variable with the route path?

Not at the moment.

The use case for this is to allow me to consolidate templates which only differ by this path. For instance, if there are two collections each with a different destination.

Agreed this is a valid use case, I would expect linkTo helper to support it in future. Meantime since you've only got two collections you could accomplish this with conditionals in the template

{{#if isRouteOne}}
  {{#linkTo "routeOne.subrouteOne" model}}{{model.title}}{{/linkTo}}
{{else}}
  {{#linkTo "routeTwo.subrouteTwo" model}}{{model.title}}{{/linkTo}}
{{/if}}

Answer 2

Instead of {{linkTo}},you can use {{action}} and handle the event of transition by route name specify in destination property of model.