I am using ember.js 1.2 and facing a problem while trying to display loading spinner and notification messages during the crud operations on my models.
Here is the code :
var MyModelController = Ember.ObjectController.extend({
needs: ['application'],
application: Ember.computed.alias("controllers.application"),
actions: {
save: function() {
var _this = this;
// Display the spinner
this.get('application').get('loading').trigger(true);
this.get('model').save().then(function(response) {
// Hide the spinner
_this.get('application').get('loading').trigger(false);
// Display the success message
_this.get('application').get('flash').success('The model has been updated.');
}, function(response) {
// Hide the loading spinner
_this.get('application').get('loading').trigger(false);
// Display the error message
_this.get('application').get('flash').danger('Error updating the model.');
});
}
}
});
Two main problems here :
First : the spinner is displayed with a translation that takes 0.5s but the save operation is performed with less duration and the spinner is displayed and disappears immediately. Here I would like to set a 1s timer before the save operation is called on my model to ensure the animation is performed correctly. How could it be possible ?
Second : the success method on my flash object is binded to the specific {{view.message}} on the template. If I call this method outside the 'then' of the promise, the message is well displayed, but in my case it is not as if the binding is not done. Did I miss something in the way to use the promise ? How could it be possible to display this message ?