Découvrir Ember.js

Créer ses routes à segments dynamiques

Testez gratuitement nos 1246 formations

pendant 10 jours !

Tester maintenant Afficher tous les abonnements
Créez votre première route à segment dynamique. Vous allez configurer l'affichage en fonction des informations contenues dans l'URL.
04:08

Transcription

Voyons maintenant comment faire en sorte que cette route groups.group soit personnalisable. Pour l'instant, vous voyez, y a toujours marquée la même chose, voici un groupe, l'URL ne change pas, peu importe le groupe, il est toujours marqué groupe, alors qu'il faudrait idéalement qu'on ait l'idée du groupe. Voici comment faire ce qu'on appelle « Les ségments dynamiques ». Je vais en avoir « router » et je vais préciser que pour cette route, c'est pas une route standard, il y a un chemin particulier. Au lieu de fran slash group on va lui dire pass deux points, c'est un slash et deux points juste avant, le type groupe_id. En faisant ça, il sera capable, en arrivant ici, d'avoir une idée de groupe une idée de groupe qui va permettre de définir. Alors, ça marche pas encore, puisque c'est pas défini jusqu'au bout j'ai pas fait l'ensemble des tâches qu'avais à faire. Il va falloir maintenant que lorsque je fais un lien ici, je précise quelle est l'idée du groupe que je veux lier. Jusqu'à présent vous avez lié, et maintenat comme c'est un lien dynamique faut lui préciser quel chiffre d'en mettre. Et là il suffit de lui passer carrément l'objet, par exemple, précisez que l'idée, en lui passant l'objet, va automatiquement puisqu'un champ idéal en tailleur récuperait l'idée. [ bruit de clavier d'rdinateur] Donc là j'ai mon lien qui évolue. Alors regardons encore une fois en bas, ici va paraître le lien, on voit que Famille va avoir un groupe slash un, groupe slash deux, groupe slash trois. Donc, les liens sont bien mis en forme. A l'arrivé, on a quelque chose, qui, bon, ne fait rien de particulier pour le moment, mais on a un lien qui évolue à chaque fois, vous voyez, un rôle de l'URL change. Si je veux avoir des données qui s'affichent. [ bruit de clavier d'ordinateur] Ce qu'on aimerait, ce serait model.title, avoir quelque chose de similaire à ça, à savoir que quand on clique sur l'élément, on a « Famille » , « Amis », « Travail ». Et voilà ça marche, y passe bien puisqu'en fait il y fait passer carrément l'objet entier. Et je récupère le modèle dans ma vie en forme. Le problème que j'ai, c'est que si j'actualise ici, là ça ne marche plus. D'ailleurs, je vous montre l'Inspecter, j'ai du rouge, et trouve pas de modèle pour le groupe numéro un. Alors, pourquoi est-ce que ça marche dans le sens et pas dans l'autre. Ça marche quand je pars d'ici et que je clique sur mon lien, parce que c'est le « Link tool » qui prend le modèle et qui le fait passer à la prochaine page. Alors, quand j'actualise c'est comme si était un tout nouveau site, y va charger le modèle de groupe et puis ensuite il va essayer de charger le modèle de groups.group et il n'y arrive pas puisque on n'a pas défini dans la route groups.group, au moins de récupérer le modèle. Et comme y trouve pas de modèle et que dans cette page-là on lui dit ben charge le titre du modèle et [ inaudible ] vous êtes gentil qu'on modèle j'en ai pas. Pour arriver à faire ça, il vous faut venir dans le fichier group sans s point js, allez ici. Voilà, et là, définir notre modèle comme on l'a fait pour l'autre. La différence c'est que [ inaudible ] sera pas toujours le même. Et là si vous avez une route ségment dynmique, vous pouvez ajouter un variable paramètre, return, alors il vous faut lui passer modèle, alors ceci, ça un peu ressemble [ inaudible ] de service internet, on va le faire juste après. Et donc [ inaudible ] le paramètre ne nous sert pas, on pourra se servir après-coup de ce paramètre pour savoir quelle est l'idée du group qu'on veut. Pour l'instant, on va faire un truc vraiment pas terrible, c'est pour comprendre, pour faire des choses simple pour moment, on va retourner ça. Là, c'est pas un tableau que je veux redonner, c'est un seul objet. Alors, je vais retourner Famille à chaque fois, et on voit qu'il charge Famille avec le problème c'est que si je charge autre chose, là, ça marche, mais si j'actualise ce group deux, là on va y mettre Famille quoiqu'il a ce qui est pas le bon résultat parce que, voilà ce qu'on a fait, c'est qu'il va demander en retournant toujours le groupe Famille peu importe l'idée qu'on a reçue ici. Faudrait également faire si l' idée est égale à un, je retourne ça, si ellel est égale à deux, je retourne un autre, etc. On va pas se lancer là dedans, puisqu'on va faire quelque chose de beaucoup mieux après, c'est à demander au serveur directement, ce qui nous retourne le bon élément. Mais, on a maintenant vu les ségments dynamiques c'est-à-dire on va y avoir un nom, on aura un chiffre qui sera fait passer en paramètre en autre route qui va pouvoir changer modèle dépendant de l'URL.

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 !