How to use string variables in ember helpers (linkTo or partial)?

Question

I need to setup array of menu links in the router and then render them in template using #each. But seems like #linkTo helper didn\'t recognize variables. How can i solve th

Answer 1

You can't use variable inside linkTo helper, you need to use bindAttr on an anchor tag instead

<a {{bindAttr href="link.route" class="link.classes"}}>link</a>

Answer 2

If you are still struggling with ken's option, you may want to try something like this:

{{#each link in mainControls}}
    <a {{action "goToLink" link}} {{bindAttr class="link.classes"}}>
        {{link.name}}
    </a>
{{/each}}

And then you will need a goToLink function to handle the action. You can put it on your Collection, but if you don't, it is supposed to bubble up to your route handler, which, in theory, should make things really easy:

App.MyRoute = Ember.Route.extend({
    // ... stuff ...

    actions: {
            goToLink: function(item) {
                this.transitionTo(item.route);
            }
    }
});

You can read more about Actions, here: http://emberjs.com/guides/templates/actions/

Update

I have put together a fiddle for you, using the latest and greatest Ember.

I made a slight variation on my suggestion above, due to some technical limitations I discovered.

Specifically, the Route only seems to be able to handle actions for controllers that were created internally by the Route. This is a problem for our navigation menu, since you are changing routes, while it's still on the screen.

If I switched to using a Handlebars "render" helper to render the menu, no Router seems to be willing to handle the action. However, the current router seems to always be hooked up in the bubble chain for a "send" on the controller. So, I just have the controller send an event on up the chain to the Router, and we get our routing bliss.

You can find the fiddle, here: http://jsfiddle.net/Malkyne/fh3qK/

Update 2

Here is another version of the same fiddle, only with the (weirdly undocumented) ApplicationRoute being used to directly handle the action, without the controller having to do any relaying: http://jsfiddle.net/Malkyne/ydTWZ/

Answer 3

This thread is not so recent and I do not know if most recent versions of Ember presents a different solution for this issue but on the Ember version 1.11 it works fine.

The solution is the inline version of link-to.

It works just like the helper (yes, it will toggle the active class for you depending on your current route) and allows you to pass dynamic parameters. Simulating the author's situation, we would have something like:

component.js

mainControls: [
  { path: 'widgets.new' },
  { name: 'Add' },
  { classes: 'btn btn-success icon-ok-sign' }
]

component.hbs

{{#each link in mainControls}}
  {{link-to link.name link.route class=link.classes}}
{{/each}}

More details abut this approach can be found here.

Answer 4

As of Ember.js RC6, it is possible to configure Ember to look up routes as properties rather than interpret them as hard-coded values. As of RC6.1, this requires an environment variable to be defined:

ENV.HELPER_PARAM_LOOKUPS = true

before Ember.js is loaded. For more details, see the following pull request: Quoteless route param in linkTo performs lookup

Here is a full working example in as a jsFiddle:

Example: Using a variable in a #linkTo helper in Ember