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

Question

I have an Ember application and I am using an action to apply a CSS animation. Once the animation is complete I want to bubble up the action from the controller to my route to handle further functionality.

I know that if I return: true; the action will bubble up, as explained here.

This 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 log something to my console in my animationend callback I can see it working and if I move return: true; outside of the callback, the action bubbles up successfully. However, returning true inside of the callback does not work.

What am I missing?

Answer 1

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

an IndexController defined like this

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);
    }
  }
});

would bubble to an ApplicationRoute defined like this

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

You can see a working fiddle here: http://jsfiddle.net/tikotzky/2ce9s32f/