CODEWITHSUNDEEP
javascriptember.jshandlebars.js
Massimo Guidi
Massimo Guidi

Reputation: 150

How to pass parameters with the action Helper of Ember.js inside an input field from an Handlebars template?

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?

Upvotes: 9

Views: 14096

Answers (4)

andorov
andorov

Reputation: 4336

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

Upvotes: 10

Khanad
Khanad

Reputation: 233

You can pass a parameter to an action helper :{{action "doSomething" xxx }}

Where doSomething is your controller method ,and xxx is anything in the current context of the template.

Upvotes: -3

Massimo Guidi
Massimo Guidi

Reputation: 150

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();
            });
        });
    }

Upvotes: 2

Marcio Junior
Marcio Junior

Reputation: 19128

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

Upvotes: 8

Related Questions