EmberJS - Specifica del modello di un percorso

È possibile specificare un modello di route, definendo il nome del modello nella rotta che è lo stesso nome del modello di dati e implementare il suo hook di modello.

Ember.Route.extend ({
   model: function() {
      return { //value-1 },{ //value-2 },{..},{ //value-n };
   }
});

Nel codice sopra riportato, le variabili da valore-1 a valore-n vengono utilizzate per memorizzare i valori che vengono chiamati nel modello.

La tabella seguente elenca i diversi tipi di modello di specifica dei percorsi:

Esempio

L'esempio seguente mostra come specificare una rotta per la visualizzazione dei dati. Crea una nuova rotta come specificato nei capitoli precedenti. Ora 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
});

Router.map(function() {
   this.route('specifyroute');
});

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

export default Router;

Crea il file application.hbs e aggiungi il codice seguente:

//link-to is a handlebar helper used for creating links
{{#link-to 'specifyroute'}}Click here to see details{{/link-to}}
{{outlet}} //It is a general helper, where content from other pages will 
appear inside this section

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

<h2>List of Players</h2>
<ul>
   //The <i>each</i> helper to loop over each item in the array provided from model() hook
   {{#each model as |player|}}
      <li>{{player}}</li>
   {{/each}}
</ul>
{{outlet}}

Per costruire l'URL, è necessario implementare il modello per restituire i valori:

import Ember from 'ember';

export default Ember.Route.extend ({
   //The model() method returns the data which you want to make available to the template
   model() {
      return ['MS Dhoni', 'Steve Smith', 'Jason Roy','AB de Villiers','Kane Williamson'];
   }
});

Produzione

Esegui il server ember e riceverai il seguente output:

Quando fai clic sul collegamento nell'output, verrà generato un risultato come nella schermata seguente: