Créer et utilisé les data-templates avec knockout js

Bonjour,

Je vais faire un petit truc rapide sur les data-templates avec knockout (framework js). Précédemment nous avions vu comment fonctionné ce framework. Ici nous allons allez sur une notion importantes : le data-templating.

Tout d’abord qu’est-ce que c’est que le data-templating ?

prenons comme exemple la couture : pour certaines créations les couturiers s’aident de gabarie, le Template n’est rien d’autre que cela. il défini l’affichage d’un objet sur lequel vous souhaitez afficher certaines choses.   Dans le Template vous allez dire « affiche moi cela dans des inputs  ou encore par contre ça ne l’affiche pas ». Car le langage ne peut pas de façon explicite vous affichez un objet il sera pas vraiment le rendre visible. C’est donc à nous par le biais de data-template que nous allons lui dire.

Notre cas :

Nous allons créer un objet Personne avec un nom et un prénom puis un tableau de personne.

Commençons par le Javascript :

voici l'objet personne
voici l’objet personne
notre viewModel
Notre viewModel

maintenant que nous avons cela passons au data-template de nos données :

Première étape est pas des moindre lié notre vue à notre viewmodel (sinon ça fonctionne moins bien !) :

la liaison view à viewModel
Attention sans cela est à cette endroit ça ne marche pas

ensuite de défini un simple div dans lequel je vais définir qu’il devra se « binder » grâce à un data-template :

définition du data-template
définition du data-template

Maintenant nous allons dans un script de type html/texte définir toute ce qu’on affiche et surtout comment on l’affiche :

data-template
data-template

si vous afficher votre page html vous devez optenir quelque chose de raprochant :

le résultat
le résultat

Maintenant petit bonus pour les meilleurs faite la même chose mais avec des input cette fois-ci :

petit bonus
petit bonus

regardez le résultat en changeant les valeurs. C’est pas magique ? non c’est KO ^^ !

bon continuons !

maintenant nous allons mettre un tableau de personnes et l’affichez pour voir :

le tabeau est ajouté
le tabeau est ajouté

maintenant le html :

Pour le résultat suivant

Conclusion :

Comme à chaque fois depuis que je me suis mis sur knockout, il me met KO. il est simple d’utilisation en regardant un peu soit-il la documentation on arrive faire des choses propres et facilement. Je vous conseil encore une fois d’essayer !

Publicités