Différences

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

--- 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
@@ Ligne 1: / Ligne 1: @@
 ====== Route Models ======
+===== Chargement : model hook =====
 Une route est responsable du chargement du ou des models qui seront affichés dans le template associé.
@@ Ligne 16: / Ligne 20: @@
   model() {
     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>