How to pass parameters with the action Helper of Ember.js?

Question

I have a list of items:

  <ul>
    {{#each applications}}
      <li>
        <a {{bindAttr href="url"}} 
        {{action "appClicked" on="click"}}>                
           {{name}}
        </a>
      </li>
    {{/each}}
  </ul>

On click it calls the method appClicked of the view, that this template belongs to. I want to pass some information (for example, the name of the application) to the method appClicked. Something like, {{action "appClicked(name)" on="click"}}.

Is it possible, and how?

Solution 1

I was thinking something more along the lines of this since you'll have access to a bunch more through an actual view. But Zack, if you could explain a bit more what exactly you're trying to do if this isn't what you're looking for?

App = Ember.Application.create();

App.peopleController = Ember.ArrayController.create({
    content: [ { name: 'Roy', url: '#' },
               { name: 'Mike', url: '#' }, 
               { name: 'Lucy', url: '#' } ]
});

App.PersonView = Ember.View.extend({
    tagName: 'li',
    content: null,
    linkClicked: function() {
        console.log(this.getPath('content.name'));
    }
});

<ul>
{{#each App.peopleController}}
    {{#view App.PersonView contentBinding="this"}}
        <a {{bindAttr href="content.url"}} {{action "linkClicked" on="click"}}>
            {{content.name}}
        </a>
    {{/view}}
{{/each}}
</ul>

Solution 2

Apparently, Ember has evolved now and there is an ability to pass a parameter to an action:

{{action "functionName" parameter}}

In your case, that would be:

<a {{bindAttr href="url"}} 
   {{action "appClicked" name on='click'}}>                
       {{name}}
   </a>

However, you could pass any attribute from the model (like the id) instead of the name.

See http://emberjs.com/guides/templates/actions/ for more information.

Solution 3

The API says you can pass in multiple parameters.

html and handlebars:

{{officename}} 
<button {{action "actionTest" "hello" "goodbye" officename}}>See parameters through action in the console</button>

controller:

actionTest: function(a, b, c){
   console.log(a);
   console.log(b);
   console.log(c);
},

See it in action in this jsbin

Solution 4

From subviews, you can attach data-attributes and access them in your controller.

For example, in your view, if you have:

{{#view Ember.Button target="App.controller" action="publish" data-publish=false}}Unpublish{{/view}}

Then in your controller,

App.controller = Ember.Object.extend({
  publish: function(v){
    var status = v['data-publish'];//your additional information is appended to the view.
  }
}

View more solutions

Comments

[Panagiotis Panagi]

I saw that solution, somewhere on SO (answered by Katz). As I understand, you have to create a separate View for every element that you want track events from (click, focus, etc.). Am I correct? I also found this pull github.com/emberjs/ember.js/pull/451 , not sure if this what I'm looking for.

[Roy Daniels]

I explained it in a previous answer too and yes you are correct. There are some performance concerns with rendering very large lists using regular views (one of the reasons the #collection helper is being depreciated I believe). However, if you look at my solution I change the child view to a Metamorph view which just about eliminates the performance difference between #collection and #each helpers. Anyway, this is the way you probably should do this. I wouldn't be too concerned w/ that pull req.

[Luke Melia]

As of the Ember 1.0 release, this JSBin no longer runs. You may want to update it @HaoQu Li

[Luke Melia]

I've created a version of the jsfiddle in this answer that is compatible and idiomatic for Ember 1.0. Feel free to update your answer with this link, Roy: jsfiddle.net/tL4Xt