Ember: transition to route after a promise resolves

Question

I have an Ember controller using StripeCheckout as follows:

App.BasketController = Ember.ObjectController.extend({

    self: this,

    handler: StripeCheckout.configure({
        key: 'key',
        image: 'img/logo.png',
        token: function (token, args) {
            // Use the token to create the charge with a server-side script.
            // You can access the token ID with `token.id`

            $.post('api/payment', {token: token, args: args}, self.didPurchase.bind(self));
        }
    }),

    didPurchase: function (response) {

        window.console.log('ajax success', response);

        App.order = new App.Order({
            reference: response.reference,
            items: App.userBasket.get('items'),
            cost: App.userBasket.get('cost')
        });

        this.transitionToRoute('order-complete');
    }
});

I've tried a number of things to get the purchase function to work but it doesn't manage to transitionToRoute because this is never the controller, even if I bind, $.proxy and such.

Answer 1

What you are doing with self is not going to work. You need to capture the reference to the controller effectively. Something like this should work:

App.BasketController = Ember.ObjectController.extend({
  handler: null, // will be set as handler for StripeCheckout
  initializeStripeHandler: function(){
    var self = this;
    this.handler = StripeCheckout.configure({
      key: 'key',
      image: 'img/logo.png',
      token: function (token, args) {
        // Use the token to create the charge with a server-side script.
        // You can access the token ID with `token.id`
        $.post('api/payment', {token: token, args: args}, self.didPurchase.bind(self)));
      }
    }),
  }.on('init')
  didPurchase: function (response) {
      window.console.log('ajax success', response);
      App.order = new App.Order({
          reference: response.reference,
          items: App.userBasket.get('items'),
          cost: App.userBasket.get('cost')
      });
      this.transitionToRoute('order-complete');
  }
});