EmberJS - Rendu d'un modèle

Les itinéraires sont utilisés pour rendre le modèle externe à l'écran, ce qui peut être obtenu en définissant templateName dans le gestionnaire d'itinéraire.

Syntaxe

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

Exemple

L'exemple suivant montre comment rendre un modèle pour afficher des données. Créez une nouvelle route comme spécifié dans les chapitres précédents. Ici, nous avons créé l'itinéraire en tant que messages et ouvrons le fichier router.js avec le code suivant pour définir les mappages d'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;

Créez le fichier application.hbs et ajoutez-y le code suivant -

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

Ouvrez le fichier posts.js créé sous app / routes / avec le code suivant -

import Ember from 'ember';

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

Ouvrez le fichier posts / new.hbs créé sous app / templates / avec le code suivant -

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

Production

Exécutez le serveur de braises et vous recevrez la sortie suivante -

Lorsque vous cliquez sur le lien que vous recevez dans la sortie, il générera un résultat comme dans la capture d'écran suivante -