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

Question

I need to configure an array of menu links in the router and then display them in the template using #each. But it looks like the #linkTo helper did not recognize the 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'} ]) } }) 

Display links in application 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 

Amber 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 the ken option, you can try something like this:

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

And then you need the goToLink function to handle the action. You can put it in your collection, but if you do not, it is assumed that it will bubble before your route handler, which theoretically should make things very easy:

 App.MyRoute = Ember.Route.extend({ // ... stuff ... actions: { goToLink: function(item) { this.transitionTo(item.route); } } }); 

Learn more about actions here: http://emberjs.com/guides/templates/actions/

Update

I have compiled a violin for you using the latest and greatest Ember.

I made a slight change in my suggestion above, due to some technical limitations that I discovered.

In particular, only the Route seems to be able to handle actions for the controllers that were created inside the route. This is a problem for our navigation menu, as you change routes while they are still on the screen.

If I switched to using the "rendering" of the Handlebars descriptor to render the menu, no router seems to want to handle the action. However, the current router seems to always connect in a chain of bubbles to “send” to the controller. So, I have a controller that sends an event on a chain to a router, and we get our bliss of routing.

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

Update 2

Here is another version of the same script, only with the (obscurely undocumented) ApplicationRoute used to directly control this action, without having to relay the controller: http://jsfiddle.net/Malkyne/ydTWZ/

Answer 2

You cannot use the variable inside linkTo helper, you need to use bindAttr instead of the anchor tag

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

Answer 3

As in Ember.js RC6, you can configure Ember to search for routes as properties, rather than interpret them as hardcoded values. As for RC6.1, this requires the definition of an environment variable:

 ENV.HELPER_PARAM_LOOKUPS = true 

before downloading Ember.js. For more information, see the following pull request: QuoteTo parameter in linkTo searches

Here is a complete working example in the form of jsFiddle:

Example: using a variable in the #linkTo helper in Ember

Answer 4

This thread is not so fresh, and I don’t know if the latest Ember releases another solution for this problem, but in Ember version 1.11 it works fine.

The solution is the built-in version of link-to .

It works just like an assistant (yes, it will switch the active class for you depending on your current route) and allows you to pass dynamic parameters. Imitating the situation of the author, 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 on this approach can be found here .