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 this?

Router:

Lite.DashboardRoute = Em.Route.extend({
  setupController: function(controller, model) {
    this.controllerFor('application').set('mainControls', [ {path: 'widgets.new', name: 'Add', classes: 'btn btn-success icon-ok-sign'} ])
  }
})

Links rendering in applications template:

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

Error message:

ember.debug.js:51 Error: assertion failed: The route link.route was not found

Ember version:

// Version: v1.0.0-pre.4
// Last commit: 855db1a (2013-01-17 23:06:53 -0800)

Answer 1

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 2

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

Answer 3

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>