• 10 hours
  • Medium

Free online content available in this course.

Got it!

Last updated on 1/23/18

La notion de data-binding

Log in or subscribe for free to enjoy all this course has to offer!

Qu'est-ce que le data-binding ?

La plupart des frameworks qui permettent de créer des applications web utilisent cette notion de data-binding. C'est le cas par exemple de Knockout.js (http://knockoutjs.com/), mais c'est également le cas pour AngularJS. Il s'agit d'un moyen de lier la partie vue à la partie logique. En d'autres termes, grâce à cela, les éléments de votre code HTML seront liés à votre contrôleur JavaScript. Formidable, n'est-ce pas? Non, vous n'êtes pas convaincu de l'utilité ? Eh bien lisez la suite alors! ;)

Utilité du data-binding

Admettons que je souhaite afficher si une personne est majeure en fonction de son âge. Je vous ai préparé un JSFiddle afin d'illustrer le fonctionnement:  http://jsfiddle.net/6nwL3r1t/6/ . Ne vous souciez pas de la syntaxe qui peut paraître terrifiante quand on la voit pour la première fois. Intéressez-vous aux deux bindings présents dans cet exemple :

  • Le premier au niveau du champ input : vous constatez la présence de l'attribut ng-model dans la balise HTML. En fait, le binding Angular se fait au moyen de ce que l'on appelle des directives. Vous les reconnaissez car elles sont précédées de ngBref, dans notre cas, nous disons tout simplement de lier la valeur du champ input à la valeur de la variable age  présent dans le code JavaScript. Ne vous souciez pas de $scope, nous y reviendrons par la suite.

  • Le deuxième au niveau de la balise <b>. Cette fois, nous utilisons la directive ng-bind a laquelle nous lions une fonction qui retourne la chaîne de caractère "mineur ou majeur" en fonction de l'âge.

Si vous vous amusez à changer la valeur dans le champ input pour y mettre 19 par exemple, vous constaterez que le texte dans la balise <b> changera.

Le data-binding est un concept extrêmement puissant qui va réellement révolutionner votre façon de développer.

Essayons de développer la même fonctionnalité sans utiliser de binding et en s'autorisant à utiliser simplement jQuery. La manière très naturelle de faire serait donc la suivante : http://jsfiddle.net/atgh5zur/1/

Le problème de cette méthode réside dans le fait que nous devons modifier le DOM (Document Object Model), ce qui est très mauvais lorsque l'on se pose la question de la maintenabilité du code. En effet, imaginez que demain votre code HTML change, que vous décidiez de ne plus utiliser d'id. Votre code ne fonctionnera plus car il faudra également revoir le JavaScript. 

Par ailleurs, posez-vous toujours la question du test. Dans mon premier exemple, la spécification de la fonction majeurOrMineur  était très simple et j'étais parfaitement en mesure d'écrire un test unitaire adéquat. Dans ce deuxième exemple, nous jouons avec des événements et des modifications de notre vue. Notre logique métier se retrouve enfermée dans un callback, ce qui complexifie énormément le test.

Un autre exemple pour vous convaincre

AngularJS est un framework qui appartient à la catégories des frameworks MVVM (Modèle-Vue-VueModèle). En d'autre termes, ces frameworks sont créés sur la base du binding. Fini les modification du DOM. Tout se passera désormais grâce aux bindings. 

Il est très courant d'afficher ou de cacher des éléments sur notre page HTML en réaction aux actions de l'utilisateur.

Prenez exemple sur ce nouveau JSFiddle : http://jsfiddle.net/7sh8a9oz/

Dans ce cas, nous avons créé 2 nouveaux bindings :

  • Le premier est lié à la case à cocher. Nous avons lié sa valeur à la variable showContentLorsque la case est cochée, la variable contiendra la valeur true  et false sinon !

  • Le deuxième binding se fait au moyen de la directive ng-show. Cette directive prend un booléen en paramètre et affichera le contenu si ce booléen est vrai, sinon il sera caché.

Ah, cette fois, je suis sûr que vous êtes convaincus !! :p

Conclusion

Prenez vraiment conscience que le data-binding est un concept clé de ce framework. Croyez-moi, vous verrez sa puissance au fur et à mesure de son utilisation. Le plus difficile, au regard de mon expérience, c'est de changer sa façon de penser. Ne plus agir directement avec le DOM est quelque chose de compliqué à assimiler, surtout au début ! Le data-binding est un peu ce que sont les pointeurs pour le langage C. Ils sont partout et il est important de les comprendre avant de poursuivre.

Example of certificate of achievement
Example of certificate of achievement