Knockout : la libraire JavaScript qui facilite la vie des développeurs web

Avec la librairie Knockout, fini les codes spaghettis sur Javascript avec des onchange, onclick partout et 36 fonctions qui gèrent chaque évènement des élément du DOM.

Du MVVM sur le web

Cette librairie introduit le concept de MVVM (Model-View-View-Model) pour les sites/applications web. Et ce qui est merveilleux est qu’on peut l’utiliser sans problème avec n’importe quelle libraire JavaScript car Knockout comme jQuery ce qui décuple la puissance de votre code !

Avec Knockout on peut, par exemple, « lier » la valeur d’un champ de texte avec une variable qui change de valeur automatiquement dès que le champ de texte est mis à jour (ou inversement). Une fonction intéressante est que toutes les variables qui dépendent de celle-ci (par exemple le prix d’un produit qui s’affiche dès qu’on en sélectionne un) vont être « notifiées » du changement pour reconsidérer leur valeur aussi.

Exemple

Voici un exemple simple avec Knockout : on entre son nom et son âge et dans un paragraphe sera affiché « [votrenom] est majeur/mineur »

Inscrivez votre nom ici : <input type="text" data-bind="value: votre_nom"/><br/>
Votre âge : <input type="number" data-bind="value:votre_age" /><br/>
<p>
    <span style="font-weight:bold" data-bind="text:votre_nom"></span>
     est <span data-bind="text: majeur_mineur" ></span>
</p>

<script src="http://ajax.aspnetcdn.com/ajax/knockout/knockout-3.0.0.js"></script>
<script>
function viewModel()
{
    this.votre_nom = ko.observable(); // Contiendra le nom 
    this.votre_age = ko.observable();  // Contiendra l'âge

    this.majeur_mineur = ko.computed(
        function() // Cette fonction est celle qui va réevaluer 
                   // la valeur de majeur_mineur en retournant le résultat
        {
            return this.votre_age() >= 18 ? 'majeur' : 'mineur'
        }, this );
    // la valeur de majeur_mineur (soit 'majeur' soit 'mineur') sera réévaluée
    // automatiquement si un âge différent est entré
    // C'est ça la puissance de Knockout
}
ko.applyBindings(new viewModel());
</script>

Ce qui donne


Inscrivez votre nom ici :
Votre âge :

est


Non, l’attribut data-bind n’est pas un nouvel attribut en HTML5 mais il sert à knockout qui scanne sa valeur pour déterminer le ou les « bindings » utilisés. Dans cet exemple, la valeur de data-bind nous informe que :

  • Dans l’input, la valeur du champ texte est liée à la variable viewModel.votre_nom donc si la variable change, l’input change de valeur et inversement si le champ texte change, la variable change aussi.
  • Dans le paragraphe, le texte dans la balise <span> est lié à la valeur de la même variable viewModel.votre_nom.

Conclusion

En résumé, Knockout est une librairie simple, légère (50 ko) et puissante. Je vous la recommande fortement car le code devient plus clair et la programmation plus facile, on n’a plus à se préoccuper de détails futiles en programmation JS qui nous font perdre du temps et on peut se concentrer sur l’essentiel.

Ce genre de libraries en JS va nous permettre enfin de créer de vraies applications web sophistiquées qui fonctionneront avec toutes les plateformes (télévisions, tablettes). D’ailleurs je suis en train d’en créer une qui utilise Knockout, jQuery et jQuery Mobile (qui permet d’avoir une interfaces proches des tablettes et téléphones mobile), et j’ai hâte de la partager avec vous !

Le site officiel de knockout www.knockoutjs.com contient un tutoriel mais en anglais malheureusement pour les non-anglophones.

Je vous laisse avec cette découverte et bon codage !

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *