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?

Answer 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>

Answer 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.

Answer 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

Answer 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.
  }
}

Answer 5

An improvement to Veeb's answer, remember you have the jQuery event so you can do:

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

// In your js code
appClicked: function (event) {
    var param = $(event.target).attr('param');
    ...
}

Answer 6

You can try to make the parameter an attribute of the <li> or <a> tag and then use jQuery to access it.

Maybe something like

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

// In your js code
appClicked: function (event) {
    // You may have to play around and check which DOM element
    // has the the param attribute. From memory it is the parent.
    var param = this.$().parent().attr('param');
    ...
}