How to pass parameters with the action Helper of Ember.js inside an input field from an Handlebars template?
Solution 1
I think that isn't possible to do this using the action
property from input
view helper.
A workaround could be wrap your input in a form that use the action
view helper using the submit event, like the following:
Template
{{#each}}
<li>
<form {{action "createUser" this on="submit"}}>
{{name}}
{{input type="text" value=name}}
</form>
</li>
{{/each}}
Route
...
actions: {
createUser: function(user) {
alert(user.get('name'));
}
}
...
So when the user hit enter, will have the event triggered.
The main difference between the action property and the action view helper is that the action view helper is more flexible and you can supply the context and put it inside of any tag:
<div {{action "someAction" someObject}} on="click">Click me</div>
In the route:
actions: {
someAction: function(someObject) {
// do something with the someObject
}
}
See the docs for further information
Please give a look in the jsfiddle to see that sample in action http://jsfiddle.net/marciojunior/UAgjX/
I hope it helps
Solution 2
You can now pass a function, along with values -
submit=(action 'setName' 'Sal')
http://emberjs.com/blog/2015/06/12/ember-1-13-0-released.html#toc_closure-actions
Solution 3
Finally i ended up with this solution:
Template
{{input class="newUser" type="text" value=newFullName placeholder="add user"}}
<button {{action 'createUser' this newFullName}}>Send</button>
Controller
createUser: function (fund, newFullName) {
var fullName = newFullName;
var user = this.store.createRecord('appUser', {
fullName: fullName,
fund: fund,
payments:[]
});
user.save().then(function(){
fund.get('users').pushObject(user);
fund.save().then(function(){
fund.reload();
});
});
}
Massimo Guidi
Updated on July 24, 2022Comments
-
Massimo Guidi almost 2 years
In my handlebars template I have this loop:
{{#each itemController="fund"}} <li> <label>{{title}}</label> <span>{{amount}}</span> {{input type="text" placeholder="new user" value=newFullName action="createUser"}} {{partial 'user-list'}} </li> {{/each}}
and need to pass the current object as parameter to the 'createUser' action. Something like this:
action="createUser(this)"
or:
action 'createUser' this
But it seems that ember can't handle parameters for actions inside an input field...
Am i missing something?
-
Didar Burmaganov over 10 yearsmove brackets in <div {{action "someAction" someObject}} on="click">Click me</div>
-
SublimeYe over 10 yearsIs there a solution for <input type="file" /> to pass onchange event in action helper and access "files" property?
-
SuperUberDuper almost 9 yearswhy use this? Why not just do a get("newFullName") in the action handler?
-
anthonygore over 8 yearsYeah this works. Surprised they haven't put it in the guides yet
-
Aamir Mahmood almost 8 yearsNow this should be acceptable answer for newer versions