How to call the action method on the controller from the outside, with the same action by pressing {{action}}

Question

Please look at this code ...

`` ``

App.BooksRoute = Ember.Route.extend({ model: return function () { return this.store.find('books'); } }); App.BooksController = Ember.ArrayController.extend({ actions: { updateData: function () { console.log("updateData is called!"); var books = this.filter(function () { return true; }); for(var i=0; i<books.length; i++) { //doSomething… } } } }); 

`` ``

I want to call the updateData action on the BookController outside.

I tried this code.

App.__container__.lookup("controller:books").send('updateData');

It really works. But in action, updateData this is different from the one in which updateData was called by clicking {{action 'updateData'}} on the books template.

If {{action 'updateData'}} is this.filter() , the this.filter() method in updateData will return book models. But if you call App.__container__.lookup("controller:books").send('updateData'); the this.filter() method in this.filter() action updateData not return anything.

How can I call the updateData action on the BookController from the outside, with the same behavior by pressing {{action 'updateData'}}.

I will be glad to know about it.

(I am using Ember.js 1.0.0)

Answer 1

You can use either bind or jQuery.proxy . bind provided in JS since version 1.8.5, so it is quite safe to use it if you do not need to support very old browsers. http://kangax.imtqy.com/es5-compat-table/

In any case, you basically manually look at the this object.

So, if you have this IndexController and you want to run raiseAlert from outside the application.

 App.IndexController = Ember.ArrayController.extend({ testValue : "fooBar!", actions : { raiseAlert : function(source){ alert( source + " " + this.get('testValue') ); } } }); 

With bind :

 function externalAlertBind(){ var controller = App.__container__.lookup("controller:index"); var boundSend = controller.send.bind(controller); boundSend('raiseAlert','External Bind'); } 

With jQuery.proxy

 function externalAlertProxy(){ var controller = App.__container__.lookup("controller:index"); var proxySend = jQuery.proxy(controller.send,controller); proxySend('raiseAlert','External Proxy'); } 

Interestingly, this seems OK without using bind or proxy in this JSBin.

 function externalAlert(){ var controller = App.__container__.lookup("controller:index"); controller.send('raiseAlert','External'); } 

Here JSBin shows all of them: http://jsbin.com/ucanam/1080/edit

[UPDATE]: another JSBin that calls filter in action: http://jsbin.com/ucanam/1082/edit

[UPDATE 2]: I have everything to work by looking at "controller:booksIndex" instead of "controller:books-index" .

Here's JSBin: http://jsbin.com/ICaMimo/1/edit

And a way to see how it works (since the routes are weird): http://jsbin.com/ICaMimo/1#/index

Answer 2

This solved my similar problem

Read more about action boubling here: http://emberjs.com/guides/templates/actions/#toc_action-bubbling

 SpeedMind.ApplicationRoute = Ember.Route.extend({ actions: { // This makes sure that all calls to the {{action 'goBack'}} // in the end is run by the application-controllers implementation // using the boubling action system. (controller->route->parentroutes) goBack: function() { this.controllerFor('application').send('goBack'); } }, }; SpeedMind.ApplicationController = Ember.Controller.extend({ actions: { goBack: function(){ console.log("This is the real goBack method definition!"); } }, }); 

Answer 3

You can simply force ember to call your method, rather than process it inside the action itself.

 App.BooksController = Ember.ArrayController.extend({ actions: { fireUpdateData: function(){ App.BooksController.updateData(); } }, // This is outside of the action updateData: function () { console.log("updateData is called!"); var books = this.filter(function () { return true; }); for(var i=0; i<books.length; i++) { //doSomething… } } }); 

Now that you want to call updateData (), just use

 App.BooksController.updateData(); 

Or in case of a handlebars file

 {{action "fireUpdateData"}}