Router

Ceci est une ancienne révision du document !

Le router EmberJs associe chaque URL connue à un ou plusieurs route handlers.

Un route handler peut :

Afficher un template.
Charger un model pour le mettre à disposition d'un template.
Effectuer une redirection vers une nouvelle route (si par ex l'utilisateur n'a pas l'autorisation d'accès à la route sollicitée).
Gérer les actions permettant la modification du model ou réalisant une redirection.

Pour générer une route avec ember-cli :

ember generate route route-name

La commande generate route :

crée le fichier js correspondant au route handler app\routes\route-name.js
crée le template app\templates\route-name.hbs
met à jour le router en ajoutant la route au map
crée un fichier de test

Exemple de fichier router :

        
          app/router.js
          
              Router.map(function() {
  this.route('about');
  this.route('favorites', { path: '/favs' });
});

Utilisation dans un fichier template avec le helper {{link-to}} :

        
          hbs file
          
              {{#link-to "index"}}<img class="logo">{{/link-to}}
 
<nav>
  {{#link-to "about"}}About{{/link-to}}
  {{#link-to "favorites"}}Favorites{{/link-to}}
</nav>

Une route imbriquée permet d'afficher le résultat d'un template dans un template principal.

La route posts/new correspond à l'affichage du formulaire new post, appelé depuis la liste des posts.

Elle peut-être générée par la commande :

ember generate route posts/new

        
          app/router.js
          
              Router.map(function() {
  this.route('posts', function() {
    this.route('new');
  });
});

Le template posts.hbs devra dans ce cas faire appel au helper {{outlet}} pour insérer le contenu du template new :

        
          templates/posts.hbs
          
              <h1>Posts</h1>
<!-- Display posts and other content -->
{{outlet}}

A chaque url, ember associe automatiquement une route index implicite :

La configuration suivante du router :

        
          app/router.js
          
              Router.map(function() {
  this.route('favorites');
});

est équivalente à :

        
          app/router.js
          
              Router.map(function() {
  this.route('index', { path: '/' });
  this.route('favorites');
});

Ember ajoute automatiquement un index à chaque appel de function.

Ainsi, pour une route imbriquée :

        
          app/router.js
          
              Router.map(function() {
  this.route('posts', function() {
    this.route('favorites');
  });
});

l'équivalent pour ember est :

        
          app/router.js
          
              Router.map(function() {
  this.route('index', { path: '/' });
  this.route('posts', function() {
    this.route('index', { path: '/' });
    this.route('favorites');
  });
});

A l'adresse /posts, la route active sera posts.index, le template posts/index sera affiché grâce au helper {{outlet}} dans le template posts.

A l'adresse /posts/favorites, Ember remplacera {{outlet}} dans le template posts avec le contenu du template posts/favorites.

Une url avec segments dynamiques possède une ou plusieurs parties variables, introduites par un : et suivies par un identifier.

Router

Création de routes

Routes imbriquées

Routes index

Segments dynamiques