EmberJS - Spécification du modèle d'une route

Vous pouvez spécifier un modèle de routes, en définissant le nom du modèle dans la route qui est le même nom que le modèle de données et implémenter son hook de modèle.

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

Dans le code ci-dessus, les variables value-1 à value-n sont utilisées pour stocker les valeurs qui sont appelées dans le modèle.

Le tableau suivant répertorie les différents types de modèle de spécification d'itinéraires -

S.No.	Spécification des itinéraires et description
1	Modèles dynamiques Il définit les routes avec le segment dynamique qui est utilisé par Ember pour accéder à la valeur depuis l'URL.
2	Modèles multiples Vous pouvez définir plusieurs modèles à l'aide de RSVP.hash qui utilise en outre les objets pour renvoyer les promesses.

Exemple

L'exemple suivant montre comment spécifier un itinéraire pour afficher des données. Créez une nouvelle route comme spécifié dans les chapitres précédents. Ouvrez maintenant le fichier router.js avec le code suivant 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
});

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

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

export default Router;

Créez le fichier application.hbs et ajoutez le code suivant -

//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

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

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

Pour construire l'URL, vous devez implémenter le modèle pour renvoyer les valeurs -

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

Production

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

Lorsque vous cliquez sur le lien dans la sortie, il générera un résultat comme dans la capture d'écran suivante -