EmberJS - Sottostati di caricamento / errore

Ember.js sovrascrive le transizioni per personalizzare l'asincronizzazione tra le rotte facendo uso di errori e caricando sottostati.

Sintassi

Ember.Route.extend ({
   model() {
      //code here
   }
});

Router.map(function() {
   this.route('path1', function() {
      this.route('path2');
   });
});

Esempio

L'esempio fornito di seguito dimostra l'uso di stati secondari di caricamento / errore che si verifica durante il caricamento di una rotta. Crea una nuova rotta e chiamala loaderror e apri il file router.js con il seguente codice per definire le mappature 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('loaderror', function() {
      this.route('loaderr');
   });
});

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

Apri il file loaderror.js creato in app / routes / con il seguente codice:

import Ember from 'ember';

export default Ember.Route.extend ({
   model() {
      return new Ember.RSVP.Promise(function (resolve, reject) {
         setTimeout(function () {
            resolve({});
         }, 1500);
      });
   }
});

Apri il file application.hbs creato in app / templates / con il seguente codice:

{{outlet}}

Apri il file index.hbs e aggiungi il seguente codice:

{{link-to 'loaderror' 'loaderror'}} 
<small>(this link displays the 'loading' route/template correctly)</small>
{{outlet}}

Quando fai clic sul link loaderror, la pagina dovrebbe aprirsi con lo stato di caricamento. Pertanto, crea un file loading.hbs per specificare lo stato di caricamento -

<h2 style = "color: #f00;">template: loading</h2>

Ora apri il file loaderror.hbs che mostra il messaggio di errore -

<h2>--error--!</h2>
{{link-to 'loaderror.loaderr' 'loaderror.loaderr'}} 
<small>(doesn't display the 'loading' route/template, 
   because 'loaderror/loading' does not exist!!!</small>
{{outlet}}

Produzione

Esegui il server ember e riceverai il seguente output:

Quando fai clic sul link, verrà visualizzato il messaggio di caricamento del modello:

Quindi visualizza uno stato secondario di errore quando si verificano errori durante una transizione -