mardi 26 janvier 2016

Wait for other interaction to happen before resolving RSVP

I have a component that on a swipe will send an action upward to the parent route/controller to handle some ajax functionality. This component has some UI that gets set to a loading state to show the user things are happening.

callAjaxAction() {
  this.setProperties({working:true});
  Ember.RSVP.cast(this.attrs.action()).finally(() => {
    this.$('.draggable').animate({
      left: 0
    });
    this.setProperties({working:false});
  });
}

In this case the controller catches the action specified on the component definition and calls an ajax function to get some data to display in the page

// in the controller action
return Ember.RSVP.Promise((resolve,reject) => {
    Ember.$.ajax({
      type: 'get',
      dataType: 'json',
      url: `http://***/api/paysources/user/697?key=${ENV.APP.api_key}`
    }).then((response)=>{
      this.setProperties({
        'cards':response.user_paysources,
        'showCards': true
      });
    },(reason)=>{
      reject();
      this.get('devlog').whisper(reason);
    })
  })

When the endpoint returns data it gets set to a property on the page (which another component picks up and displays) and then sets a property on the controller to do some more UI to this page.

I then have a click listener that will set a selectedCard property to a card the user has chosen and when that happens I need to fire off another ajax function that actually pays for items in a cart. Once this ajax call resolves I need to send back to the original component (the one that swipes and sets a loading state) that everything has been resolved and it can reset it's UI.




Aucun commentaire:

Enregistrer un commentaire