| Les deux révisions précédentes Révision précédente Prochaine révision | Révision précédente |
| richclient:emberjs:router:models [2018/01/18 15:38] – [Models dynamiques] jcheron | richclient:emberjs:router:models [2019/08/31 14:21] (Version actuelle) – modification externe 127.0.0.1 |
|---|
| Avec Ember, cette fonctionnalité est mise en place avec les [[richclient:emberjs:router#segments_dynamiques|routes dynamiques]]. | 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> |