EmberJS - Rendering di un modello

Le rotte vengono utilizzate per il rendering del modello esterno sullo schermo che può essere ottenuto definendo templateName nel gestore delle rotte.

Sintassi

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

Esempio

L'esempio seguente mostra come eseguire il rendering di un modello per la visualizzazione dei dati. Crea una nuova rotta come specificato nei capitoli precedenti. Qui abbiamo creato il percorso come post e aperto il file router.js con il seguente codice per definire le mappature degli 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;

Crea il file application.hbs e aggiungi il seguente codice al suo interno:

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

Apri il file posts.js creato in app / routes / con il seguente codice:

import Ember from 'ember';

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

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

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

Produzione

Esegui il server ember e riceverai il seguente output:

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