Comprendre la liaison de données dans Knockout.js

Liaison de données ce n'est rien de plus que l'union de données dynamiques texte ou HTML dans les différentes parties de l'arbre SOLEIL de notre document où Knockout.js fonctionne, cela nous permet de générer du contenu dynamique à partir de vues et de modèles.
Ce concept se retrouve dans un grand nombre de cadres de développement pour JavaScript car c'est un moyen très efficace d'exprimer la logique de développement, il est donc extrêmement important que nous comprenions comment cela fonctionne et comment cela peut nous faciliter la vie lors de la création de nos applications.
ExigencesL'exigence principale est d'être capable d'exécuter Knockout.js que nous l'ayons téléchargé ou inclus à partir d'un CDN. Nous aurons également besoin d'un serveur de style Apache pour servir notre page, et un éditeur de texte comme Texte sublime ou NotePad ++ pour créer les documents que nos applications transporteront.
La meilleure façon de voir le Liaison de données est avec un exemple, voyons dans le code suivant comment nous avons créé un document HTML où nous incluons Knockout.js, puis dans notre corps nous avons créé une étiquette H1 nous y faisons un liaison de données de HTML, cela signifie qu'il attend le code HTML.
Dans la partie JavaScript ce que nous avons fait, c'est simplement créer un modèle-vue et y définir quelques attributs pour pouvoir travailler avec lui. La chose intéressante est que cela nous permet de transmettre les données de notre modèle-vue à une partie du code HTML. Voyons à quoi ressemble notre code :

 Liaison de données dans knockout.js 

En appelant notre document depuis notre navigateur nous obtenons le résultat suivant :

Ici, nous voyons comment nous avons construit une méthode qui renvoie le nom et un peu de HTML pour lui donner du style, cela signifie que nous pouvons avoir une gamme infinie de possibilités, mais ce qui ressort peut-être le plus, c'est que nous pouvons appliquer une liaison de données à presque n'importe quel article. Nous pouvons donc envoyer du texte, du HTML, etc.
Mais non seulement ce qui nous permet d'imprimer du texte à l'utilisateur, nous pouvons également incorporer du CSS, des classes et des attributs à nos étiquettes HTML, nous permettant de contrôler presque tous les aspects de notre page sans avoir besoin de définir des valeurs statiques.
Voyons dans l'exemple suivant comment nous donnons une classe spéciale à une étiquette HTML, l'idée est que l'on puisse générer des styles dynamiques sans avoir besoin d'intervenir lorsque l'on a une application qui recherche une police DU REPOS, cependant dans ce cas pour simplifier nous allons charger un seul composant dynamiquement :

 Liaison de données dans knockout.js 
 

On remarque alors comment on peut passer un composant style qui va définir l'apparence du texte, on pourrait aussi ajouter une classe et enfin on appelle notre texte à partir du modèle, on remarque aussi que l'on fait tout ça dans le même liaison de données, en séparant seulement les différents éléments par des virgules.
Si nous exécutons notre nouvel exemple, le résultat dans notre navigateur est le suivant :

AGRANDIR

Portons une attention particulière à la partie de débogueur de HTML du navigateur, on voit ici où se trouvent les éléments du liaison de données ils ont été effectivement reportés sur l'étiquette.
Il existe d'autres fonctionnalités que nous pouvons utiliser avec le liaison de données, l'un d'eux sont les conditionnels, c'est-à-dire que nous pouvons placer un élément ou un autre dans nos étiquettes HTML prenant en compte les différentes propriétés de notre modèle. Voyons le code suivant où nous utilisons un exemple de ce style :

 Liaison de données conditionnelle 
 

Dans notre vue de modèle, nous avons défini un attribut appelé id que nous mettons à 0, puis dans notre HTML dans la rubrique de liaison de données Nous avons défini un opérateur ternaire, où nous spécifions si l'identifiant de la vue du modèle est 0, il imprime 'Bonjour' sinon il imprime 'Au revoir'.
Exécutons l'exemple dans le navigateur pour voir son résultat :

Un exercice intéressant serait de changer l'identifiant en une autre valeur pour confirmer l'opération, c'est pourquoi nous le laissons comme tâche.
Quelque chose de très important que nous devons prendre en compte est le contexte de nos éléments, c'est parce que Knockout.js utilise une structure hiérarchique de Pere fils pour gérer les différentes propriétés que nous obtenons des vues du modèle.
Cela signifie que nous travaillons toujours sur la base d'un parent, et ainsi nous pouvons accéder à ses propriétés, générant ainsi des propriétés de l'enfant qui diffèrent des autres enfants qui sont au même niveau, pouvant ainsi incorporer des valeurs différentes.
Comme tout est relatif au contexte on voit que l'on pourrait utiliser dans les exemples précédents le texte de liaison de données sans qu'il soit nécessaire d'indiquer à qui il appartient, car lorsque cela se produit, Knockout.js il assume immédiatement le contexte de l'enfant actuel. Voyons ci-dessous les différents types de contexte que nous pouvons gérer dans notre application :
$ racineC'est le contexte principal, c'est d'où dérive notre vue de modèle, lorsqu'elle est invoquée à partir de n'importe quelle partie de notre application, elle recherchera toujours la relation la plus hiérarchique et la plus prioritaire dans notre structure, c'est spécial lorsque nous avons beaucoup d'enfants et nous voulons quelque chose du parent plus âgé.
$ parentCela fonctionne de la même manière que $ racine, à la différence qu'il ne fait référence qu'au parent immédiat de notre élément, donc sa portée est limitée à cela, il est largement utilisé lorsque nous travaillons avec des cycles pour chaque générer de nombreux enfants.
$ parentsL'ajout du pluriel à ce contexte nous dit que nous construisons une sorte d'arrangement ou de tableau qui contient un index pour chacun des parents de l'enfant d'où nous l'appelons, comme ceci $ parents [0] est le père immédiat, $ parents [1] est le parent du parent immédiat et ainsi de suite.
$ donnéesIl nous permet d'accéder aux données du contexte où nous sommes positionnés, il est généralement utilisé lorsque nous travaillons avec des contenus qui sont des variables et que nous avons besoin d'accéder aux propriétés de notre vue modèle.
indice $Il n'est accessible que lorsque l'on travaille avec des boucles pour chaque et il nous permet d'accéder aux différentes positions de notre élément.
Lorsqu'on a besoin d'itérer sur un certain nombre d'éléments, c'est le moment où il faut utiliser la boucle pour chaque, cela passera par un tableau ou une liste d'éléments et de cette façon nous pourrons construire notre liste dans le document HTML.
Dans l'exemple suivant, nous allons avoir une propriété appelée livres dans notre vue de modèle, puis nous allons la parcourir avec un pour chaque en utilisant l'une des variables de contexte, dans ce cas $ données, Voyons voir:

 Liaison de données pour chaque

Si nous voyons le résultat du navigateur, nous remarquerons l'opération qui se produit en prenant en compte tous les concepts que nous avons appris au cours du didacticiel.

Avec cela, nous terminons ce tutoriel, nous avons appris et avons eu un contact plus approfondi avec Knockout.js, il est important de comprendre de manière très profonde et solide les concepts de ce qu'est le liaison de données, est déjà la manière dont nous utiliserons les données, les attributs et les propriétés de nos vues de modèle. Nous avons également pu comprendre un concept très important comme le contexte, maintenant nous pouvons comprendre en quoi les différents éléments diffèrent et pourquoi Knockout.js il sait quand obtenir certaines données plutôt que d'autres, et c'est parce qu'il connaît toujours le contexte de nos éléments.