EmberJS - Plantilla de varios segmentos

Para varios segmentos, puede proporcionar un modelo o un identificador para cada segmento si la ruta está anidada.

Sintaxis

Router.map(function() {
   this.resource('route_name');
   this.resource('route_name', { path: 'route_path' });
});

Ejemplo

El ejemplo muestra el uso de múltiples segmentos en la ruta anidada proporcionando un identificador al segmento. Cree dos rutas con los nombres como información y registre y abra el archivo router.js para definir las asignaciones de URL:

import Ember from 'ember';
import config from './config/environment';

const Router = Ember.Router.extend ({
   location: config.locationType,
   rootURL: config.rootURL
});

Router.map(function() {
   this.route('info');
   this.route('record', { path: 'records/:records_id' });
});

export default Router;

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

{{#link-to 'info'}}Fruits{{/link-to}}
{{#link-to 'record' recoModel}}Some Record{{/link-to}}
{{outlet}}

Al hacer clic en el enlace "Frutas", la página debería abrir el archivo info.hbs , que contiene el siguiente código:

<p>Some Fruits</p>
<ul>
   <li>Orange</li>
   <li>Banana</li>
</ul>
{{outlet}}

Si hace clic en el enlace Some Record , la página debería abrir el archivo record.hbs , que contiene el siguiente código:

<p>Some Records</p>
{{model.name}}
{{outlet}}

Ahora cree el controlador application.js , que se creará en app / controller / to con el siguiente código:

import Ember from 'ember';

export default Ember.Controller.extend ({
   recoModel: function(){
      //return the records value to the called route
      return {records_id:1, name:'Docs List'};
   }.property()
});

Salida

Ejecute el servidor Ember; recibirá el siguiente resultado:

Al hacer clic en el enlace Frutas , se mostrará el siguiente texto del archivo de plantilla:

Al hacer clic en el enlace Some Record , se mostrará el siguiente texto del archivo de plantilla: