Différences

Ci-dessous, les différences entre deux révisions de la page.

--- richclient:emberjs:router [2018/01/17 19:04] – créée jcheron
+++ richclient:emberjs:router [2019/08/31 14:21] (Version actuelle) – modification externe 127.0.0.1
@@ Ligne 1: / Ligne 1: @@
-====== Router ======
+====== Routing ======
 Le router EmberJs associe chaque URL connue à un ou plusieurs route handlers.
@@ Ligne 9: / Ligne 9: @@
   * 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.
+===== Création de routes =====
+Pour générer une route avec ember-cli :
+<sxh bash;gutter:false>
+ember generate route route-name
+</sxh>
+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 :
+<sxh javascript;title:app/router.js>
+Router.map(function() {
+  this.route('about');
+  this.route('favorites', { path: '/favs' });
+});
+</sxh>
+Utilisation dans un fichier template avec le helper **<nowiki>{{link-to}}</nowiki>** :
+<sxh html;title:hbs file>
+{{#link-to "index"}}<img class="logo">{{/link-to}}
+<nav>
+  {{#link-to "about"}}About{{/link-to}}
+  {{#link-to "favorites"}}Favorites{{/link-to}}
+</nav>
+</sxh>
+===== Routes imbriquées =====
+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 :
+<sxh bash;gutter:false>
+ember generate route posts/new
+</sxh>
+<sxh javascript;title:app/router.js>
+Router.map(function() {
+  this.route('posts', function() {
+    this.route('new');
+  });
+});
+</sxh>
+Le template posts.hbs devra dans ce cas faire appel au helper **<nowiki>{{outlet}}</nowiki>** pour insérer le contenu du template **new** :
+<sxh html;title:templates/posts.hbs>
+<h1>Posts</h1>
+<!-- Display posts and other content -->
+{{outlet}}
+</sxh>
+===== Routes index =====
+A chaque url, ember associe automatiquement une route index implicite :
+La configuration suivante du router :
+<sxh javascript;title:app/router.js>
+Router.map(function() {
+  this.route('favorites');
+});
+</sxh>
+est équivalente à :
+<sxh javascript;title:app/router.js>
+Router.map(function() {
+  this.route('index', { path: '/' });
+  this.route('favorites');
+});
+</sxh>
+Ember ajoute automatiquement un index à chaque appel de function.
+Ainsi, pour une route imbriquée :
+<sxh javascript;title:app/router.js>
+Router.map(function() {
+  this.route('posts', function() {
+    this.route('favorites');
+  });
+});
+</sxh>
+l'équivalent pour ember est :
+<sxh javascript;title:app/router.js>
+Router.map(function() {
+  this.route('index', { path: '/' });
+  this.route('posts', function() {
+    this.route('index', { path: '/' });
+    this.route('favorites');
+  });
+});
+</sxh>
+A l'adresse **/posts**, la route active sera **posts.index**, le template **posts/index** sera affiché grâce au helper <nowiki>{{outlet}}</nowiki> dans le template **posts**.
+A l'adresse **/posts/favorites**, Ember remplacera <nowiki>{{outlet}}</nowiki> dans le template **posts** avec le contenu du template **posts/favorites**.
+===== Segments dynamiques =====
+Une url avec segments dynamiques possède une ou plusieurs parties variables, introduites par un **:** et suivies par un **identifier**.
+<sxh javascript;title:app/router.js>
+Router.map(function() {
+  this.route('posts');
+  this.route('post', { path: '/post/:post_id' });
+});
+</sxh>
+==== Nommage des identifiers ====
+Pour faciliter le chargement des models, il est conseillé de respecter la convention de nommage suivante :\\
+un identifier devra respecter la norme **:model-name_id**
+<sxh javascript;title:app/router.js>
+Router.map(function() {
+  this.route('photo', { path: '/photo/:photo_id' }, function() {
+    this.route('comment', { path: '/comment/:comment_id' });
+  });
+});
+</sxh>