Découvrir Ember.js

Définir les relations entre les objets

Testez gratuitement nos 1271 formations

pendant 10 jours !

Tester maintenant Afficher tous les abonnements
Apprenez à créer des dépendances entre vos objets. Vous allez pouvoir simplifier encore plus leur récupération et leur affichage.
05:23

Transcription

Il ne nous reste maintenant qu'à afficher les contacts de chaque groupe. Alors, on pourrait très bien le faire avec un this.store.find all contacts ou plutôt avec un query où on dirait : " Je veux les contacts " en précisant le numéro du groupe, mais on va essayer de faire autrement, de montrer une autre fonctionnalité d'Ember. À mon avis, c'est une des fonctionnalités les plus intéressantes. Alors, je vais aller ouvrir mes deux modèles. Je vais ouvrir groups, je vais partager l'écran en deux et ici je vais ouvrir contact. Ça ce sont mes deux objets modèles, donc j'en ai un qui me permet de gérer les objets group et un qui me permet de gérer les objets contact. Je vais aller regarder à quoi ressemble ce que me retourne mon serveur quand je récupère un groupe. Donc si je donne par exemple la liste des groupes, voici ce que retourne mon serveur. Je pour chaque groupe, j'ai un id, une image, un titre, mais j'ai aussi la liste des contacts qui sont dans ce groupe sous la forme d'id. C'est uniquement l'id des contacts, il ne me donne pas les infos entières de chaque contact. Si je regarde aussi un des contacts, par exemple le trois, il me retourne email, firstname, lastname, picture, id, et aussi group. Donc quelle est l'id du groupe dans lequel il est inséré. Puisque le serveur me donne ces informations là, je vais pouvoir utiliser ces attributs dans Ember. On va retourner dans Sublime. Ce qu'on va faire ici, alors en va commencer par exemple, le plus simple, c'est celui-ci : quand j'ai un contact, si je veux connaître le groupe, si le serveur me retourne l'info du groupe dans lequel il est, je vais faire un attribut de type DS belongsTo et je précise le type : group. Ça, ça veut dire : pour le champ groups, tu vas avoir un chiffre et ce chiffre sera l'id d'un objet group. Automatiquement, Ember est capable de comprendre que le chiffre qu'il va retourner dans cette requête, que le 1 qui est ici, ça correspond à l'id d'un groupe. Et dans celui-ci, pour le tableau avec tous les id de tous les contacts, - il faut bien mettre le même nom, forcément, que la valeur retournée par le serveur - et ça va être : DS.hasMany. Pareil, on précise le type ; donc là, chaque id représente un contact. En termes de rendu, pour l'instant, ça ne change absolument rien puisqu'on se ne s'en sert pas, et ce qui va être vraiment intéressant, c'est qu'on va pouvoir maintenant parcourir tout simplement les propriétés de notre objet groups (tiens, par exemple, la liste de contacts, pour les afficher ici) et ce sera le boulot du store, s'il se rend compte qu'il n'a que l'id et qu'il ne connaît pas pas l'objet, de faire les requêtes au serveur pour récupérer individuellement chaque objet que l'on va chercher à utiliser. On va donc aller dans group.hbs templates. Pour l'instant, on a affiché uniquement la carte du groupe. Ce qu'on va ajouter maintenant, c'est le parcours de la liste des contacts comprise dans un groupe. On va utiliser encore une fois le each dans undelbar. Là, je dois fournir la liste, donc ça va être model.contacts. C'est-à-dire que je vais utiliser la propriété contact de modèles. Et comme c'est un hasMany, il sait très bien que c'est une liste, c'est un tableau qu'il va avoir. Et chaque objet qui est dans cette liste, je vais l'appeler contact. Alors ce n'est pas lié au nom de la classe, c'est le nom de la variable que je veux utiliser en local pour faire référence à ces valeurs. Tout ça, on va l'envelopper dans un ul, pour faire une liste de tous les contacts, et encore une fois, pour chaque contact, on va faire un li, tout simplement. Et ici, je vais dire : contact. - alors j'aurais pu mettre firstname, lastname, mais rappelez-vous, on a ajouté une propriété, on la voit ici, fullname, qui nous permet d'avoir la continuation du prénom et du nom. Donc on va mettre fullname. C'est un autre avantage d'utiliser des objets construits en code,s plutôt que d'utiliser directement le logiciel dès qu'il arrive du serveur. Et tiens : voilà, ça a déjà marché. Alors qu'est-ce qui s'est passé au niveau du réseau ? On peut le voir ici. Donc d'abord, il récupère la liste de tous les groups (ça, elle n'a pas changé depuis le début), la liste de tous les groupes qu'il a pu avoir à gérer. Ensuite, puisqu'on est sur la page 2, on est sur l'URL 2, eh bien il a demandé séparément le groupe 2 explicitement il a dit un find record, donc il est obligé de le faire. Dedans, il s'est rendu compte qu'il y avait l'id 0 et l'id 1 en termes de contacts, et dès qu'on a cherché à les afficher, ce qu'on a fait dans notre boucle, il s'est dit : « puisque j'ai besoin d'avoir ces objets là mais que je ne les connais pas », il a fait automatiquement les requêtes en disant : OK, j'ai besoin du contact 1 et j'ai besoin du contact 4. Et le serveur lui a retourné, bien sûr, les infos. Donc ça c'est les infos générales par mon petit logiciel Faker qu'on avait vu au tout début de ce cours. Et donc, on a pu avoir nos contacts qui apparaissent ici. Et si je charge, on voit qu'il refait tout le boulot, il n'y a pas de problème, il est capable de s'adapter automatiquement et donc de gérer nos éléments. On a bien réussi à utiliser la relation et c'est vraiment intéressant de voir qu'on n'a pas besoin à chaque fois, nous, de construire nos requêtes. Une fois que vous avez un objet, si votre serveur vous donne les liens entre les éléments, il vous suffit de parcourir les objets, comme vous le feriez avec n'importe quel objet javascript, et automatiquement, s'il lui manque des données, il est capable d'aller les chercher au besoin et dès qu'il les a récupérées, de les insérer à l'intérieur de votre page.

Découvrir Ember.js

Créez vos composants et mettez en page vos sites avec une facilité déconcertante avec Ember.js. Apprenez à créer des routes et à charger vos modèles depuis un service web externe.

2h57 (37 vidéos)
Aucun commentaire n´est disponible actuellement
 
Logiciel :
Spécial abonnés
Date de parution :31 mars 2016

Votre formation est disponible en ligne avec option de téléchargement. Bonne nouvelle : vous ne devez pas choisir entre les deux. Dès que vous achetez une formation, vous disposez des deux options de consultation !

Le téléchargement vous permet de consulter la formation hors ligne et offre une interface plus conviviale. Si vous travaillez sur différents ordinateurs ou que vous ne voulez pas regarder la formation en une seule fois, connectez-vous sur cette page pour consulter en ligne les vidéos de la formation. Nous vous souhaitons un excellent apprentissage avec cette formation vidéo.

N'hésitez pas à nous contacter si vous avez des questions !