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