How to handle loading events in controllers in ember.js?
How to handle loading events in controllers in ember.js?
1 answer
@dedrick
In Ember.js, loading events can be handled in controllers by using a combination of computed properties and observers. Here is an example of how loading events can be handled in a controller:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 |
import Controller from '@ember/controller';
import { inject as service } from '@ember/service';
export default Controller.extend({
ajaxService: service(),
isLoading: false,
actions: {
fetchData() {
this.set('isLoading', true);
this.get('ajaxService').request('https://api.example.com/data')
.then((data) => {
// Handle the fetched data
})
.catch((error) => {
// Handle the error
})
.finally(() => {
this.set('isLoading', false);
});
}
},
loadingDidChange: observer('isLoading', function() {
if (this.get('isLoading')) {
// Show loading indicator
} else {
// Hide loading indicator
}
})
});
|
In this example, the controller has a property isLoading that indicates whether data is currently being loaded. The fetchData action sets isLoading to true before making a request to the API. Once the request is complete, isLoading is set back to false.
An observer called loadingDidChange is used to update the UI based on the value of isLoading. When isLoading is true, the loading indicator is shown. When isLoading is false, the loading indicator is hidden.
This approach allows you to easily manage loading events in controllers and update the UI accordingly.