Introduction
Bonjour,
Récemment, j’ai vu un tutoriel sur vue.js.
Il y a un concept qui m’a plu, c’est celui du binding.
En gros, on attache une variable à un contenu puis le contenu se met a jour automatiquement quand la variable change. Ce n’est pas a double sens, par exemple si le contenu est un input, la variable ne change pas quand on modifie le champ.
Je voulais recréer ce comportement en javascript et j’ai décidé d’appeler ça un watcher.
Implémentation
La syntaxe doit être simple et élégante. Voici comment j’aimerais utiliser le watcher :
<!DOCTYPE html> <html> <head> <title>watcher</title> </head> <body> Exemple d'un watcher sur une variable.<br> Tout ce qui est écrit dans ce champ sera répercuté immédiatement dans les instances dessous.<br> <input oninput="toto.valeur=this.value;"><br> Voici une instance : <span bind="toto"></span><br> Encore une : <span bind="toto"></span><br> Et une autre : <span bind="toto"></span><br> Allez, une dernière : <span bind="toto"></span> </body> </html>
L’input sert à modifier la variable toto. un attribut bind= »toto » attachera l’élement à la variable toto.
Pour que tout se passe automatiquement, il faut utiliser get et set. Malheureusement, cela ne marche qu’a l’intérieur des objets. Il faudra donc que toto soit un objet.
Voici le script pour effectuer la magie :
On peut copier directement ce code avant </body>
<script>
var toto = {
watcher : [],
_valeur : "",
get valeur () {
return this._valeur;
},
set valeur(argValeur) {
this._valeur = argValeur;
for (i=0 ; i < this.watcher.length ; i++) {
this.watcher[i].innerHTML = argValeur;
this.watcher[i].value = argValeur;
}
},
watch : function (argElement) {
toto.watcher.push(argElement);
}
};
elements = document.querySelectorAll('[bind=toto]');
for (i=0 ; i < elements.length ; i++) {
toto.watch(elements[i]);
}
</script>
Sans utiliser de champ input, on peut modifier la variable directement en javascript de la façon suivante :
toto.valeur="coucou";
Attention !
La variable toto.valeur n’est pas sanitisée, il ne faut donc pas l’utiliser directement comme ci-dessus.
Conclusion
C’était juste pour reproduire un comportement qui paraît « magique » au premier abord et d’en comprendre la mécanique.