EmberJS actions - call one action from another when wrapped within `actions`

Question

How do you call one action from another action when wrapped within actions in an EmberJS controller?

Original code that uses the now deprecated way to define actions:

//app.js App.IndexController = Ember.ArrayController.extend({     // properties     /* ... */      // actions     actionFoo: function() {         /* ... */         this.actionBar();     },     actionBar: function() {         /* ... */     } });  //app.html <div class="foo" {{action actionFoo this}}> <div class="bar" {{action actionBar this}}> 

However, with EmberJS 1.0.0, we get a deprecation warning, saying that actions must be put within an actions object within the controller, instead of directly within the controller, as above.

Updating the code, according to recommendations:

//app.js App.IndexController = Ember.ArrayController.extend({     // properties     /* ... */      // actions     actions: {         actionFoo: function() {             /* ... */             this.actionBar(); //this.actionBar is undefined             // this.actions.actionBar(); //this.actions is undefined         },         actionBar: function() {             /* ... */         }     } });  //app.html <div class="foo" {{action actionFoo this}}> <div class="bar" {{action actionBar this}}> 

However, I find that it is not possible for one function defined within actions to call another, as the this object appears to no longer be the controller.

How can I go about doing this?

Answer 1

You can use the send(actionName, arguments) method.

App.IndexController = Ember.ArrayController.extend({     actions: {         actionFoo: function() {             alert('foo');             this.send('actionBar');         },         actionBar: function() {             alert('bar');         }     } }); 

Here is a jsfiddle with this sample http://jsfiddle.net/marciojunior/pxz4y/