Geek Answers Handbook

Emberjs: how to display boot counters and model notifications

I am using ember.js 1.2 and am encountering a problem when trying to display boot counters and notifications during 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:

  • First: the counter is displayed with a translation, which takes 0.5 s, but the save operation is performed with a shorter duration, and the counter is displayed and immediately disappears. Here I would like to set the timer 1s before the save operation is called on my model to make sure the animation is done correctly. How is this possible?

  • Secondly: the success method on my Flash object is tied to a specific {{view.message}} template. If I call this method outside of the "then" promise, the message will be displayed well, but in my case it is not as if the binding is not being performed. Am I missing something to use the promise? How can I display this message?

+6
source share
3 answers

As for the loading counter: kingpin2k gave the way to the solution. Legacy LoadingRoute is called when a promise takes a long time to return. So I wrote it like this:

 var ApplicationRoute = Ember.Route.extend({ actions: { loading: function() { var _app = this.controllerFor('application'); _app.get('loading').trigger(true); this.router.one('didTransition', function() { _app.get('loading').trigger(false); }); } } });

Then in the routes I made my promises take at least 500 ms before returning. This way the spinner animation appears and the user interface is updated correctly.

 model: function() { var _this = this; return new Ember.RSVP.Promise(function(resolve) { setTimeout(function() { resolve(_this.get('store').find('model')); }, 500); }); },

This method works to get data through the hook of the route model. But to update the model using the save button, I wrote a specific ModelController that implements the save action; then all my controllers that manage one resource expand it:

 var ModelController = Ember.ObjectController.extend({ needs: ['application'], updateOKMessage: null, updateKOMessage: null, application: Ember.computed.alias("controllers.application"), actions: { save: function() { var _this = this; var _app = _this.get('application'); // Display the loading spinner _app.get('loading').trigger(true); // Wait during 500ms to let the animation occurs setTimeout(function() { // Save the model _this.get('model').save().then(function(response) { setTimeout(function() { // Set the message of the flash from a timeout // if not, the message does not appear _app.get('flash').success(_this.get('updateOKMessage')); }, 100); }, function(response) { setTimeout(function() { // Same issue (or maybe it is not an issue) _app.get('flash').danger(_this.get('updateKOMessage')); }, 100); if(response.status === 422) { _this.get('model').set('errors', response.responseJSON.errors); } }).then(function() { setTimeout(function() { _app.get('loading').trigger(false); }, 600); }); }, 500); } } });

I fixed the issue with flash messages setting them from a timer callback, and not from the promise return method.

+2
source

My solution was pretty simple, not ember, I suppose. but it works beautifully and does not generate too many new files / helpers:

application / routes / application.js

 import Ember from 'ember'; export default Ember.Route.extend(Ember.Evented, { actions: { loading: function() { // enable/disable spinner when model is loading slow Ember.$('#blur').css('-webkit-filter', 'blur(3px)') Ember.$('#spinner').css('display', 'flex') this.router.one('didTransition', function() { Ember.$('#blur').css('-webkit-filter', 'blur(0px)') Ember.$('#spinner').css('display', 'none') }); } } });
0
source

More articles:


All Articles