I have a feature where a component triggers an action when swiped, sending it upwards to the parent route/controller for handling some ajax functionality. The component includes UI elements that indicate a loading state while the action is being processed. Once the action is complete and working gets set back to false, the loading animation stops and user interaction can resume.
callAjaxAction() {
this.setProperties({working:true});
Ember.RSVP.cast(this.attrs.action()).finally(() => {
this.$('.draggable').animate({
left: 0
});
this.setProperties({working:false});
});
}
In this scenario, the controller captures the action specified in the component definition and executes an ajax function to retrieve data for display on the page.
// in the controller action
return new 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);
})
})
This process involves displaying a popup component allowing the user to select a payment card. Upon clicking away or completing the payment with a selected card, the UI needs to be reset not only on the current page but also send a signal to the swipe component indicating that the loading process is finished.
In my concept, I envision a way to trigger an action on a component from the parent controller/route. Is there a method to achieve this?