EmberJS - Call super action after promise resolves

Question

I am using Ember 2.6.0

I am extending a third party component that has some functionality defined in a action and I want to catch that action in my subclass, call a function that returns a promise and fire the supers action when the promise resolves.

So the third party component does this:

 import Ember from 'ember';

export default Ember.Component.extend({
  actions: {
     theAction() {
         this._somePrivateFunction();
        //do other stuff
     }
  }
});

And in my subclass I am doing:

import Ember from 'ember';
import ThirdPartyComponent from 'path/to/component'

export default ThirdPartyComponent.extend({
  _funcThatReturnsPromise() {
     return new Ember.RSVP.Promise();
  }
  actions: {
     theAction() {
        const thePromise = this._funcThatReturnsPromise();
        thePromise.then(() => {
            // undefined!
            this._super(...arguments);
        })
     }
  }
});

this._super() does not resolve to the parent component action when called in the promises callback. I've tried storing the supers function as a property and calling it:

   theAction() {
            const thePromise = this._funcThatReturnsPromise();
            this.set('superFunc', this._super);
            thePromise.then(() => {
           // calls the super but "this" inside the supers action is undefined
           this._super(...arguments);
       })
   }

This, in addition to being ugly, results in this inside the supers action to be undefined. I'm not sure why that is.. looking through some docs.

There is also the option of calling send() in my subclasses action:

   theAction() {
      const thePromise = this._funcThatReturnsPromise();
      this.set('superFunc', this._super);
      thePromise.then(() => {
          //infinite loop!
          this.send('theAction');
      });
   }

But this of course results in an infinite loop since the function ends up calling itself.

I'm not sure how to proceed here. Could anyone tell me if there is a clean way to do what I am trying to do here? Any advice would be appreciated. Thanks much!

Answer 1

In child component do like :

theAction() {
      const thePromise = this._funcThatReturnsPromise();
      let parentAction = this._super;
      let self = this;
      thePromise.then(() => {
          //parent usage
          parentAction();

          // this usage
          self.doSome();
      });
   }