EmberJS - Le routeur fait une pause pour les promesses

La transition peut être interrompue en renvoyant une promesse du crochet modèle. La transition peut être effectuée immédiatement en renvoyant des objets normaux ou des tableaux à partir du modèle.

Syntaxe

Ember.Route.extend ({
   model() {
      return new Ember.RSVP.Promise(function(param) {
         //code here
      });
   }
});

Exemple

L'exemple ci-dessous montre comment la transition s'arrêtera si le modèle renvoie une promesse. Créez une nouvelle route et nommez-la promisepause et ouvrez le fichier router.js pour définir les mappages d'URL -

import Ember from 'ember';                   
//Access to Ember.js library as variable Ember
import config from './config/environment';
//It provides access to app's configuration data as variable config 

//The const declares read only variable
const Router = Ember.Router.extend ({
   location: config.locationType,
   rootURL: config.rootURL
});

//Defines URL mappings that takes parameter as an object to create the routes
Router.map(function() {
   this.route('promisepause');
});

//It specifies Router variable available to other parts of the app
export default Router;

Ouvrez le fichier fichier application.hbs créé sous app / templates / avec le code suivant -

<h2>Router Pauses for Promises</h2>
{{#link-to 'promisepause'}}Click Here{{/link-to}}

Lorsque vous cliquez sur le lien ci-dessus, la page du modèle de pause de promesse s'ouvre. Le fichier promisepause.hbs contient le code suivant -

{{model.msg}}
{{outlet}}

Ouvrez maintenant le fichier promisepause.js créé sous app / routes / avec le code suivant -

import Ember from 'ember';
import RSVP from 'rsvp';

export default Ember.Route.extend ({
   model() {
      //RSVP.js is an implementation of Promises
      return new Ember.RSVP.Promise(function (resolve) {
         
         Ember.run.later(function () {
            //display the promise message
            resolve ({
               msg: "This is Promise Message..."
            });
         }, 3000); //time in milli second to display promise
      });
   }
});

Production

Exécutez le serveur de braises et vous recevrez la sortie suivante -

Lorsque vous cliquez sur le lien, le modèle renvoie la promesse qui n'est résolue que 3 secondes et lorsque la promesse se réalise, le routeur commence la transition -