Différences

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

--- richclient:emberjs:router [2018/01/17 20:17] – [Création de routes] 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 29: / Ligne 29: @@
 <sxh javascript;title:app/router.js>
 Router.map(function() {
-  this.route('about', { path: '/about' });
+  this.route('about');
   this.route('favorites', { path: '/favs' });
 });
 </sxh>
-Utilisation dans un fichier template :
+Utilisation dans un fichier template avec le helper **<nowiki>{{link-to}}</nowiki>** :
 <sxh html;title:hbs file>
@@ Ligne 44: / Ligne 44: @@
 </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>