| Les deux révisions précédentes Révision précédente Prochaine révision | Révision précédente |
| richclient:emberjs:router [2018/01/17 20:22] – [Création de routes] jcheron | richclient:emberjs:router [2019/08/31 14:21] (Version actuelle) – modification externe 127.0.0.1 |
|---|
| ====== Router ====== | ====== Routing ====== |
| |
| Le router EmberJs associe chaque URL connue à un ou plusieurs route handlers. | Le router EmberJs associe chaque URL connue à un ou plusieurs route handlers. |
| </nav> | </nav> |
| </sxh> | </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> |
| | |
| | |
| | |