Ember: Accessing Input Value in an Action with Parameters

Today I fumbled around with something that I assumed would be quite straightforward in Ember but couldn’t find the exact documentation. I wanted an input to send a value to an action on a blur event. I also needed to send along the ID of another object as a param into my action. Easy enough.

// templates/product.hbs
<input type=”number” value={{ model.quantity }} {{action “updateQuantity” model.id on=”focusOut” />  

Then in my controller I defined the action

// controllers/product.js
actions: {  
   updateQuantity: function (productId) {
        this.productService.updateQuantity(productId, value);
   }
}

This is the part where I felt like I had misread the Ember guides. In this section on actions it states:

By default, the action handler receives the first parameter of the event listener, the event object the browser passes to the handler…

But when I logged the arguments for my action I only saw the ID parameter. It turns out that I had misinterpreted that section and the event parameter is always accessible within an action.

// controllers/product.js
actions: {  
   updateQuantity: function (productId) {
       var newValue = event.target.value;
       this.productService.updateQuantity(productId, newValue);
   }
}