EmberJS - Representación de una plantilla

Las rutas se utilizan para representar la plantilla externa en la pantalla, lo que se puede lograr definiendo templateName en el controlador de ruta.

Sintaxis

Ember.Route.extend ({
   templateName: 'path'
});

Ejemplo

El siguiente ejemplo muestra cómo representar una plantilla para mostrar datos. Cree una nueva ruta como se especifica en los capítulos anteriores. Aquí hemos creado la ruta como publicaciones y abrimos 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('posts', function() {
      this.route('new');
   });
});

//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 en él:

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

Abra el archivo posts.js creado en app / routes / con el siguiente código:

import Ember from 'ember';

export default Ember.Route.extend ({
   templateName: 'posts/new'
});

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

<h2>Posts</h2>
Page is rendered by defining templateName property.
{{outlet}}

Salida

Ejecute el servidor ember y recibirá el siguiente resultado:

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

↰ Previous page