Nous mettrons à jour notre Politique de confidentialité prochainement. En voici un aperçu.

Découvrir Ember.js

Personnaliser l'élément englobant

Testez gratuitement nos 1338 formations

pendant 10 jours !

Tester maintenant Afficher tous les abonnements
Personnalisez l'HTML à la base de votre composant pour qu'il s'insère parfaitement dans son environnement.
07:24

Transcription

Voyons maintenant ce qui a été généré par ember au niveau de ce template. Si j'arrive ici on voit que dans ce col md10 qui était celui de group.hbs alors du coup, c'était groups point, hbs, qu'o qu'on avait le col md10, puis on appelait un outlet, et dans cet outlet on avait ça, d'abord la carte et ensuite l'outlet du suivant. Bon, sachant qu'on n'a pas de suivant, on peut même le supprimer cet outlet pour l'instant, il n'est pas utile. Donc finalement ça, c'est mon composant. Automatiquement, contenu que j'ai mis, il est ici famille mon image, l'input pour les tests qu'on a mis, et il a rajouté un div que je n'avais pas créé. c'est le composant qui ajoute un div. Ce qu'on va pouvoir faire, c'est personnaliser ce composant qui est ajouté. Lui est obligé techniquement d'envelopper le composant dans quelque chose, par défaut, il prend un div. IL ajoute son ID et la classe ember_view, et on va pouvoir modifier certains de ces paramètes. La première chose qu'on va pouvoir modifier, si on le souhaite, c'est le tag. Donc, par exemple, si je ne veux pas utiliser un div, je peux faire tagname, deux points et mettre span Alors je vais le mettre en dessous, l'inspecteur, lui, je vais le mettre au-dessus, on va inspecter ça, et donc là on voit qu'à la place du div qu'on avait tout à l'heure, il a mis un span. Donc ça, c'est le premier moyen. C'est la première chose qu'on peut faire. On peut le mettre explicitement si on le souhaite, par défaut, ça met un div. Ce qu'on va faire maintenant, c'est aussi ajouter des classes. classNames au pluriel puisqu'on peut en mettre plusieurs, et là on peut mettre un tableau en séparant par des virgules plusieurs valeurs de classe. Ce que je vais faire, je vais ajouter une nouvelle classe, que je vais appeler, group-card on va définir la largeur width à 800 pixels pour l'instant, on va faire que ça. Et ici, je vais lui dire, je veux le style group-card qu'on a dit. Si je vais voir ma page, on voit qu'il a bien réduit tout à l'heure, il allait jusqu'au bord, inspecter donc il a gardé le ember view qu'il avait jusqu'à présent, mais il a ajouté en plus group-card. Pour finir un petit peu esthétiquement on va centrer aussi notre texte, donc je vais aller ici, et dire textAlign center Voilà, tout est centré. alors du coup, il a aussi centré le champ texte, de toute façon on va le supprimer ce champ texte. On n'en a pas besoin pour le moment. Par défaut, il nous génère un élément, mais on peut le personnaliser au besoin. On va pouvoir aller encore plus loin dans cette personnalisation, au niveau notamment des classes, on va pouvoir faire, classNameBindings et au niveau de ces bindings, on va pouvoir aussi avoir une liste de bindings, alors qu'est-ce que sont les bindings ? Je vais vous donner un exemple, on va faire is disabled ça, ça s'en serait un, et en dessous, je vais ajouter une propriété, isDisabled, deux points, true Si je vais voir le code qui a été généré, on voit qu'il a ajouté is, tiret, disabled Pourquoi ? Parce qu'il y avait true dans cette variable. Si je mets false dans cette variable, on verra qu'il n'y a plus la propriété isDisabled. Alors en fait, il va prendre le nom qui est ici, chercher une propriété qui a ce nom. Si elle est vrai, il transforme ça en nom de classe, et il l'ajoute. On peut aussi préciser le nom de classe. Donc ça serait par exemple, disabled mais je suis à false je pense, oui, on va mettre true. C'est à dire que si cette propriété est à true, au lieu de mettre tiret isDisabeld, Il mettra directement le nom que je lui ai donné. Et je peux même mettre l'inverse en mettant encore deux points, enabled Donc là, il est sur disabled, si je passe cette propriété à false, il a bien mis enabled à la place. Alors ça, c'est pour les propriétés booléennes on peut aussi avoir des bindings pour des propriétés extra class textuelle, donc si je mets extra class, ici deux points et que j'ajoute surperCard On voit qu'il a ajouté encore d'autres classes, c'est à dire qu'on a celles d'avant plus celles qu'on avait spécifiées dans les définitives, et ensuite tout le texte contenu dans la variable et ajouté tel quel. Donc si c'est une variable avec plusieurs éléments à l'intérieur, il va tout ajouter. Sachant que toutes ces propriétés, là je les ai rentré directement ici, mais elles peuvent être soit passées en paramètre, soit être modifiées par du code à l'intérieur même de la carte. Maintenant que nous avons vu pour le tag, et les classes, on peut aussi ajouter n'importe quel autre attribut, avec attribut bindings Toujours pareil, c'est un tableau parce qu'il peut y en avoir plusieurs, Et imaginez que vous vouliez utiliser un attribut title par exemple, vous allez dire : ce sera pour l'attribut title, et dans ce cas-là, il vous faut ajouter une propriété dans votre objet, soit vous mettez un vrai titre, super carte, si je fais ça, et qu'on va voir le code généré, on voit qu'il a ajouté l'attribut title en plus du reste, il a toujours les cases de tout à l'heure mais il a rajouté maintenant l'attribut title qui est ici. On peut le faire pour plusieurs, alors si il y a nul à l'intérieur, il va tout simplement retirer l'attribut, il ne va pas le mettre vide. Et si il y a une valeur, il va l'insérer. Alors ce qui peut être intéressant, c'est l'occasion de vous montrer un autre point qui s'applique à n'importe quel objet, que ce soit dans un composant, dans une root, dans tous les objets d'ember, vous avez plusieurs choses que vous pouvez utiliser. Ce qu'on va voir maintenant, ce sont les propriétés calculées. Pour faire une propriété calculée, il suffit de faire, au niveau de la valeur de la propriété, ember computed et entre parenthèses, vous allez d'abord préciser quels sont les paramètres d'où cette propriété va tirer ces valeurs. On va aller group.Title et ensuite vous lui passez une fonction à exécuter quand la valeur source a changé. Et donc là, on va retourner, return this get group.title Voilà, je ferme mon computed, je mets une virgule, alors ce que j'ai fait ici, c'est un petit peu spécial, je vais me faire un petit peu de place pour qu'on y voit mieux. On a ici ember computed ici, on précise en fait quelles sont les valeurs qui vont déclencher un rafraichissement, c'est à dire que dès que group.Title va être modifié, il sera qu'il doit recalculer cette valeur. C'est justement le principe des bindings. La première fois qu'on va se servir de ces propriétés title quelque part, il va calculer ceci, et si on s'en sert 10 fois d'affilé derrière, et que le titre ne change pas, il ne va pas la recalculer, il va garder l'ancienne valeur. Si à un moment ou un autre ce titre change il va modifier le calcul, et prévenir les 10 endroits où on s'en servait que la valeur a changé, et donc mettre à jour de partout le titre. Si on va voir le code généré, on a bien récupéré famille comme titre. Et si je clique sur un autre élément, là on voit qu'il a changé et qu'il a mis amis. Pourquoi ? Parce qu'à chaque fois il se rend compte que le titre change donc il recalcule, et il modifie l'objet en conséquence.

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 !