Emberjs: wie man Laden Spinner und Benachrichtigungen auf Modelloperationen

Question

Ich benutze ember.js 1.2 und mit einem Problem konfrontiert, während versucht, Lade Spinner und Benachrichtigungen während der Crud-Operationen auf meinen Modellen anzuzeigen. Hier

ist der 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.'); 
     }); 
    } 
    } 
}); 

Zwei Hauptprobleme hier:

• Erstens: der Spinner mit einer Übersetzung angezeigt, die 0,5s aber die Operation speichern nimmt mit weniger Dauer durchgeführt und der Spinner wird angezeigt und verschwindet sofort. Hier möchte ich einen 1s-Timer einstellen, bevor der Speichervorgang an meinem Modell aufgerufen wird, um sicherzustellen, dass die Animation korrekt ausgeführt wird. Wie könnte es möglich sein?

• Zweitens: die Erfolgsmethode auf meinem Flash-Objekt ist gebunden an die spezifische {{view.message}} auf der Vorlage. Wenn ich diese Methode außerhalb des "dann" des Versprechens rufe, wird die Nachricht gut angezeigt, aber in meinem Fall ist es nicht so, als ob die Bindung nicht erfolgt. Habe ich etwas auf dem Weg vermisst, das Versprechen zu nutzen? Wie kann diese Nachricht angezeigt werden?

Answer 1

In Bezug auf die Lade spinner umzusetzen: kingpin2k gab einen Weg zu einer Lösung. Das Legacy LoadingRoute wird aufgerufen, wenn ein Versprechen zu lange dauert. Also schrieb ich es auf diese Weise:

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); 
     }); 
    } 
    } 
}); 

dann in den Strecken ich gezwungen, meine Versprechen vor der Rückkehr mindestens 500ms zu nehmen. Der Animationsdrehfeld wird angezeigt und die Benutzeroberfläche wird korrekt aktualisiert.

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

Auf diese Weise arbeitet für Daten, die durch das Modell Haken der Route abgerufen werden. Aber um ein Modell über eine Schaltfläche zum Speichern zu aktualisieren, schrieb ich einen bestimmten ModelController, der die Sicherungsaktion implementiert. dann alle meine Controller, die eine einzige Ressource, die es verwalten erweitern:

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); 
    } 
    } 
}); 

ich das Problem mit den Flash-Mitteilungen korrigiert sie von einem Timer-Rückruf Einstellung statt von der Rückkehr Methode Versprechen.

Answer 2

Sie wollen eine Lade Route

http://emberjs.com/guides/routing/loading-and-error-substates/

https://gist.github.com/machty/6944577

Answer 3

meine Lösung war ziemlich einfach und nicht die "Glut" Art, wie ich denke. aber es funktioniert schön und laichen nicht zu viele neue Dateien/Helfer:

app/Routen/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') 
     }); 
    } 
    } 
});