EmberJS: especificar el modelo de una ruta

Puede especificar un modelo de rutas definiendo el nombre de la plantilla en la ruta, que es el mismo nombre que la plantilla de datos, e implementar su modelo de gancho.

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

En el código anterior, las variables value-1 a value-n se utilizan para almacenar los valores que se llaman en la plantilla.

La siguiente tabla enumera los diferentes tipos de modelo de Especificación de rutas:

S.No.	Especificación de rutas y descripción
1	Modelos dinámicos Define las rutas con segmento dinámico que utiliza Ember para acceder al valor desde la URL.
2	Varios modelos Puede definir varios modelos utilizando RSVP.hash, que además utiliza los objetos para devolver las promesas.

Ejemplo

El siguiente ejemplo muestra cómo especificar una ruta para mostrar datos. Cree una nueva ruta como se especifica en los capítulos anteriores. Ahora abra el archivo router.js con el siguiente código para definir las asignaciones de 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;

Cree el archivo application.hbs y agregue el siguiente código:

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

Abra el archivo Specifyroute.hbs creado en app / templates / con el siguiente código:

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

Para construir la URL, debe implementar el modelo para devolver los valores:

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

Salida

Ejecute el servidor ember y recibirá el siguiente resultado:

Cuando haga clic en el enlace en la salida, generará un resultado como en la siguiente captura de pantalla:

↰ Previous page