| Prochaine révision | Révision précédente |
| richclient:emberjs:router:models [2018/01/18 14:08] – créée jcheron | richclient:emberjs:router:models [2019/08/31 14:21] (Version actuelle) – modification externe 127.0.0.1 |
|---|
| ====== Route Models ====== | ====== Route Models ====== |
| | |
| | ===== Chargement : model hook ===== |
| | |
| | |
| Une route est responsable du chargement du ou des models qui seront affichés dans le template associé. | Une route est responsable du chargement du ou des models qui seront affichés dans le template associé. |
| |
| model() { | model() { |
| return this.get('store').findAll('user'); | return this.get('store').findAll('user'); |
| | } |
| | }); |
| | </sxh> |
| | |
| | Généralement, le **model hook** retourne une instance **Ember Data**, mais il peut également retourner un objet **promise** (requête asynchrone par exemple), un objet javascript ou un tableau. |
| | |
| | <sxh javascript;title:app/routes/users.js> |
| | import Route from '@ember/routing/route'; |
| | |
| | export default Route.extend({ |
| | model() { |
| | return [ |
| | {name: 'Higgins', age: 40}, |
| | {name: 'Rosario', age: 20}, |
| | {name: 'Travis', age: 30} |
| | ]; |
| | } |
| | }); |
| | </sxh> |
| | |
| | La valeur retournée par le model hook de la route est ensuite affectée à la propriété model du controller (implicite ou explicite). Il est ensuite possible d'utiliser le model dans le template associé. |
| | <sxh html;title:app/templates/users.hbs> |
| | <h1>Utilisateurs</h1> |
| | {{#each model as |user|}} |
| | <p>{{user.name}}</p> |
| | {{/each}} |
| | </sxh> |
| | |
| | ===== Models dynamiques ===== |
| | Le ou les models chargés dépendent parfois des interactions avec l'utilisateur. |
| | |
| | Avec Ember, cette fonctionnalité est mise en place avec les [[richclient:emberjs:router#segments_dynamiques|routes dynamiques]]. |
| | |
| | <sxh javascript;title:app/router.js> |
| | Router.map(function() { |
| | this.route('user', { path: '/users/:user_id' }); |
| | }); |
| | </sxh> |
| | |
| | <sxh javascript;title:app/routes/user.js> |
| | import Route from '@ember/routing/route'; |
| | |
| | export default Route.extend({ |
| | model(params) { |
| | return this.get('store').findRecord('user', params.user_id); |
| | } |
| | }); |
| | </sxh> |
| | |
| | |
| | ===== Models multiples ===== |
| | Dans certains cas, la route peut avoir besoin de plusieurs models. |
| | Ember utilise dans ce cas la méthode hash du package RSVP permettant de définir une seule **promise** à partir de plusieurs **promises** existantes : |
| | <sxh javascript;title:app/routes/album.js> |
| | import Route from '@ember/routing/route'; |
| | import RSVP from 'rsvp'; |
| | |
| | export default Route.extend({ |
| | model() { |
| | return RSVP.hash({ |
| | songs: this.get('store').findAll('song'), |
| | albums: this.get('store').findAll('album') |
| | }); |
| | } |
| | }); |
| | </sxh> |
| | ===== Contexte parent ===== |
| | |
| | Il arrive qu'une route ne possède pas les paramètres d'url dont elle aurait besoin, en particulier s'il s'agit d'une route enfant. |
| | |
| | Il est possible dans ce cas d'utiliser la méthode **paramsFor** pour récupérer les paramètres adéquats d'une des routes parent. |
| | |
| | Dans le cas suivant, la route **album/index** récupère les paramètres de la route **album** : |
| | <sxh javascript;title:app/routes/album/index.js> |
| | import Route from '@ember/routing/route'; |
| | |
| | export default Route.extend({ |
| | model() { |
| | let { album_id } = this.paramsFor('album'); |
| | |
| | return this.store.query('song', { album: album_id }); |
| | } |
| | }); |
| | </sxh> |
| | |
| | |
| | Il est également possible de récupérer le model délivré par une route parent avec la méthode **modelFor** : |
| | <sxh javascript;title:app/routes/album/index.js> |
| | import Route from '@ember/routing/route'; |
| | |
| | export default Route.extend({ |
| | model() { |
| | let { songs } = this.modelFor('album'); |
| | |
| | return songs; |
| } | } |
| }); | }); |
| </sxh> | </sxh> |