Différences

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

--- richclient:emberjs:router [2018/01/17 23:43] – [Routes imbriquées] 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 73: / Ligne 73: @@
 {{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>