How can I bubble an Ember action inside a callback function?

Question

I have an Ember app and I use an action to apply CSS animation. Once the animation is complete, I want to release an action from the controller on my route in order to handle additional functions.

I know that if I return: true; the action will bubble as described here .

Here is what my controller looks like:

 App.MyController = Ember.ObjectController.extend({ actions: { myAction: function() { $('.my-element').addClass('my-animation-class').one('webkitAnimationEnd oanimationend msAnimationEnd animationend', function(e) { console.log('working'); return true; } } } }); 

If I register something on my console in my animationend callback, I see that it works, and if I move return: true; outside the callback, the action succeeds. However, returning true inside the callback does not work.

What am I missing?

Answer 1

you can manually start the bubble by calling self.target.send('myAction');

an IndexController defined as

 App.IndexController = Ember.Controller.extend({ actions: { bubbleMe: function(item){ var self = this; alert('IndexController says you clicked on: ' + item); setTimeout(function(){ self.target.send('bubbleMe',[item]); }, 1000); } } }); 

will bubble up to ApplicationRoute defined this way

 App.ApplicationRoute = Ember.Route.extend({ actions: { bubbleMe: function(item){ alert('ApplicationRoute says you clicked on: ' + item); } } }); 

Here you can see the working script: http://jsfiddle.net/tikotzky/2ce9s32f/