Découvrir Ember.js

Mettre en œœuvre Ember.js

Testez gratuitement nos 1246 formations

pendant 10 jours !

Tester maintenant Afficher tous les abonnements
Mettez en application les concepts d'Ember vus au préalable. Vous allez créer votre première route et votre premier template.
05:30

Transcription

Commençons à créer notre véritable application. Pour l'ensemble de ce cours, nous allons développer un carnet d'adresse. Il y aura des groupes de contacts nommés par exemple « famille », « amis », « travail » et dans chaque groupe de contacts, une liste de personnes. Nous avons déjà créé la route « groups ». On peut la voir ici lorsqu'on est dans l'inspector number. Je vois la route « application », que l'on verra plus tard et on a la route « groups » qui existe. Si je vais dans cet URL, pour l'instant rien ne s'affiche. Il a bien rendu la route mais rien ne se passe car nos fichiers sont vides. On va retourner dans Sublime et ouvrir un fichier. Vous pouvez directement ouvrir les fichiers via l'explorateur de gauche : si vous cliquez une seule fois, il est en italique, si je clique sur « template », il remplace l'autre. Sans modifs ou double-clic, il ne va pas rester ouvert. Si je clique deux fois, il va ouvrir des onglets. L'autre façon d'ouvrir des fichiers dans Sublime, c'est de faire Commande + P et de commencer à taper le nom. Je vais taper « groups ». Je trouve celui qui est dans « route » et celui qui est dans « templates ». Commençons par celui qui est dans « route ». Il faut d'abord faire en sorte que votre route trouve un modèle et le charge pour le transmettre au template. Pour charger le modèle, vous devez respecter un format particulier. Dans le code de la route, tapez « model: », puis « function ». « Anonymous function », pas besoin de paramètres dans ce cas-là. Puis on va retourner les valeurs de modèle que l'on souhaite donner pour ce template-là. Pour cette étape du TP, on va commencer par donner des données en dur, données que j'avais déjà préparées et que je vais coller maintenant, c'est-à-dire un tableau symbolisé par des crochets, contenant trois objets symbolisés par des accolades, avec des clés valeurs. L'id sera « 1 », le titre sera « famille » et pour l'image, l'URL d'une image de famille. Le deuxième groupe est « amis » avec une URL d'image d'amis, le troisième « travail », avec une image de travail. Je mets un point-virgule ici. En faisant cela, dès que la route sera chargée, elle va créer ce tableau d'objets et le transférer au template. Le template, on va l'ouvrir : c'est « groups.hbs ». Pour l'instant, il n'y a que ce mot-clé, « outlet ». On va le laisser de côté pour l'instant, on le verra un peu plus tard. Je vais utiliser une autre fonctionnalité de Sublime : en faisant Commande + SHIFT + P vous avez des commandes toutes prêtes qui sont liées au contexte actuel. C'est comme cela qu'on avait utilisé « Package Control » pour ajouter le plugin « handlebars». Si je tape « handlebars », on voit que ce plugin va ajouter plusieurs choses supplémentaires. « If », « each », « else », plusieurs mots-clés liés au fait que l'on soit dans un fichier .hbs. C'est le « each » qui m'intéresse dans ce cas. Il va vous permettre, quand vous utilisez un tableau, de parcourir tous les éléments du tableau en générant du code html pour chaque élément. Pour chaque objet dans mon modèle, j'ajoute « as » et je donne un nom entre deux « pipes » pour l'objet. Là, cela va être « group ». Pour chaque groupe dans le modèle, je vais pouvoir insérer du code html. Ce qu'on peut faire par exemple, avec CTRL + SHIFT + W, c'est envelopper tout cela dans un « ul ». Par contre, il ne veut pas sauter les lignes. Et pour chacune des lignes, j'ajoute « li », j'utilise encore une fois « handlebars » pour aller chercher de vraies données : « group.title » entre accolades. La mise en forme n'est pas correcte, donc je fais Commande + SHIFT + P et je tape « reindent lines » comme ça le « ul » et le « li » sont mis en page correctement. Si je viens dans mon navigateur, on voit que cela a marché parfaitement. On ne le voyait pas en temps réel car on prenait tout l'écran mais à chaque fois que je sauvegardais un fichier, il rechargeait tout. Dans ce contexte, la route « groups » a chargé des données. On peut commencer à voir comment ça marche dans l'inspecteur. Je vais le mettre en plein écran. On appelle cela le « View Tree ». Cela vous permet de voir où chacune des routes s'inscrit dans le template. On peut voir que « Welcome to EmberJS » n'est pas dans le fichier « groups.hbs » : c'est un autre morceau de route qui le rend : la route « application ». Quand je mets la souris sur la route « groups », on voit, entourée dans un rectangle gris et des infos, la zone qui correspond à cette route-là. Pour cette route, on a un modèle qui a été chargé par la route. C'est ce tableau à trois cases, avec dans chaque case les infos que j'avais mis dans mon élément. « Contrôleur », on ne s'en occupe pas, et le template, on l'a déjà vu. Si je vais inspecter les sources, j'ai le « ul » et des « li » pour chaque nouveau groupe avec le titre de l'élément, ouverts et fermés autant de fois qu'il y a d'éléments dans le « each ». Voilà pour la mise en application, j'espère que vous avez compris dans les grandes lignes comment cela fonctionnait. La notion de route, basée sur l'URL et le nom de cette route va servir à créer l'objet-route qui va charger les données sous forme de modèle et les transférer au template du même nom que la route qui va faire un affichage. Nous allons maintenant voir en détail chacun des concepts : d'abord la route, puis les templates, puis les composants, etc.

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 !