EmberJS - Definizione di percorsi

Il router corrisponde all'URL corrente con le rotte responsabili della visualizzazione del modello, del caricamento dei dati e della configurazione di uno stato dell'applicazione. Il metodo router map () viene utilizzato per definire le mappature URL che passano una funzione che prende il parametro come oggetto per creare le rotte. L' helper {{link-to}} naviga nel router.

Per definire una rotta, utilizzare il seguente comando nella cartella del progetto:

ember generate route route-name

Crea il file di percorso app / routes / name_of_the_route.js, un modello per il percorso su app / templates / name_of_the_route.hbs e il file di unit test su tests/unit/routes/route_name_of_the_test.js.

È possibile definire le mappature URL utilizzando il metodo map () del router. Questo può essere invocato con il valore this per creare un oggetto per la definizione del percorso.

Router.map(function() {
   this.route('link-page', { path: '/path-to-link-page' });
   .
   .
   this.route('link-page', { path: '/path-to-link-page' });
});

Il codice sopra mostra come collegare le diverse pagine utilizzando la mappa del router. Accetta il nome e il percorso della pagina di collegamento come argomento.

La tabella seguente mostra diversi tipi di percorsi:

S.No.	Percorsi e descrizione
1	Percorsi annidati Specifica le rotte annidate definendo un modello all'interno di un altro modello.
2	Segmenti dinamici Inizia con un: nel metodo route () seguito da un identificatore.
3	Percorsi con caratteri jolly / globbing Le route con caratteri jolly vengono utilizzate per abbinare più segmenti di URL.

Esempio

L'esempio seguente mostra come definire un percorso per la visualizzazione dei dati. Apri il file .hbs creato in app / templates / . Qui, abbiamo creato il file come routedemo.hbs con il seguente codice:

<h2>My Books</h2>
<ul>
   <li>Java</li>
   <li>jQuery</li>
   <li>JavaScript</li>
</ul>

Apri il file router.js per definire i mapping 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
});

//Defines URL mappings that takes parameter as an object to create the routes
Router.map(function() {
   this.route('routedemo');
});

export default Router;

Crea il file application.hbs e aggiungi il codice seguente:

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

Produzione

Esegui il server ember e riceverai il seguente output:

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