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

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

{{#each link in mainControls}}
    
        {{link.name}}
    
{{/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/