how do I pass params to a router action in ember.js

Question

In my template:

<a {{action doSomething someParam}}>my cool link</a>

In the Router

doSomething: function(jqEvent){

}

However, jqEvent is always an instance of App.Router. I expected to have my parameter passed in. What am I missing?

Thanks.

Answer 1

Using the most recent version of Ember it works perfectly fine, so I suspect you're using an older version of Ember.

jsFiddle: http://jsfiddle.net/G4esk/

App.ApplicationRoute = Ember.Route.extend({
    events: {
        example: function(object) {
            console.log(object.get('name'));            
        }
    }
});

Answer 2

The parameters that you pass to {{action}} aren't treated as literals; they're treated as keys to objects in the current context.

See https://github.com/emberjs/ember.js/issues/1759 and https://github.com/emberjs/ember.js/issues/1796 .

Thus,

{{action doSomething someProperty}}

will try to look up the someProperty property on the current controller.

Answer 3

It is an old version of Ember. can't help that, I'm currently waiting for our Ember upgrade to get merged in. But that wasn't the cause, though the router will be changing.

It was actually two parts,

1. when the action bubbles up to the router the action is passed two arguments, the router and the jqEvent with the param attached at jqEvent.context.

2. when I inspected arguments in the chrome console I didn't see it because Chrome has an optimization (at least in the console) that strips unused arguments. This really wasn't Ember's fault, but it certainly hid what was going on.

   {{action doSomething someProperty}}

   doSomething: function(router, jqEvent) { var someProperty = jqEvent.context; }