Dynamisez vos pages web avec KnockoutJs : Un petit dans la cour des grands

On utilise ensuite notre objet viewModel en spécifiant à KO que l’on applique les liaisons:

   ko.applyBindings(new viewModel());

Il y a deux bonnes pratiques à avoir lorsqu’on applique les liaisons :

• Faire le ko.applyBinding() une fois que le dom est chargé
• Spécifier à quelle section s’applique le binding de l’objet

$( document ).ready(function() {
   //binding sur la div d'identifiant container
   ko.applyBindings(new viewModel(), document.getElementById("container"));
});

Si on ne spécifie pas à quelle section on souhaite appliquer les bindings, ces derniers se feront sur le corps (body) de votre page.
Dans une application avec plusieurs vues au sein d’une même page, cela posera des problèmes car il n’est pas possible d’appliquer le binding plusieurs fois à une même section HTML.
Pensez donc à spécifiez l’identifiant de la section sur laquelle vous voulez faire les liaisons.

Voici la vue correspondante :

<div id="container">
    <p>
        <input type="text" data-bind="value : nom"/>
    </p>
    <p>
        <input type="text" data-bind="value : prenom"/>
    </p>
    <!-- binding de la computed variable à un élément span -->
    Hello <span data-bind="text: fullname"></span> !
</div>

Les valeurs de ces deux observables sont liées par la déclarative “value” à deux inputs de type texte. Nous pouvons aussi nous amuser à contrôler le css des éléments du DOM grâce aux computed variables. C’est par là.

Controllez le worflow de votre page

KO vous permet d’interagir avec les éléments de votre DOM, via des directives de bindings. Vous pouvez conditionner l’affichage d’éléments HTML, lier un contexte à une div, itérer sur une collection pour dupliquer des markups ainsi que tout ce que vous avez toujours fait et plus.

Conditionnement (if/ifnot)

La directive If permet de gérer l’affichage de la section liée à la directive. Son fonctionnement ressemble à la propriété CSS display : si votre observable est évalué à false, les markups du bloc lié ne feront pas partie du DOM généré.

  Hello M<span data-bind="if: isFemale">lle</span>

Dans le code ci-dessus, on affiche l’élément  span uniquement si la variable observable est évaluée à true.
Petite démo par ici

La directive IfNot permet d’afficher un bloc quand la variable est évaluée à false :

  Hello M<span data-bind="ifnot: isMale">lle</span>

est équivalent à :

  Hello M<span data-bind="if: !isMale">lle</span>

Les itérations (foreach)

La directive foreach permet de dupliquer une section de markup autant de fois qu’il y a d’items présents dans la collection d’observable.

 <table>
   <tbody data-bind="foreach: users">
    <tr>
     <td data-bind="text: prenom"></td>
     <td data-bind="text: nom"></td>
     ...
   </tr>
  </tbody>
 </table>

Dans le code ci-dessus, un élément table est lié à une collection d’observable “users”. Une ligne est créée pour chaque utilisateur avec les propriétés de chacun des items. La démo c’est par là.

Les syntaxes

Il est possible d’utiliser plusieurs syntaxes pour gérer le workflow de votre page avec KO :

• La syntaxe “Native”
• La syntaxe “ContainerLess”

La syntaxe Native

...
  <tbody data-bind="foreach: users">
...

La syntaxe native est celle que nous avons utilisée dans le code précédent pour créer notre tableau. On utilise cette syntaxe quand on crée une structure HTML basée sur des relations “parent-enfants”. C’est cette syntaxe qu’il faut utiliser pour lier un élément de type Nav/Ul/Li par exemple.

La syntaxe ContainerLess

...
  <!-- ko foreach: array -->
     ...
  <!-- /ko -->
...

A l’inverse, la syntaxe ContainerLess est utilisée quand il n’y a aucune structure HTML de type “parent-enfants”. Elle commence par une balise de commentaire, suivie du mot-clé ‘ko’, puis de la directive à appliquer (foreach dans le dernier exemple). Il faut ensuite indiquer à KO que la section est terminée en ajoutant le markup ‘/ko’, toujours en commentaire.

Dans cet exemple, vous remarquerez la présence de la propriété “$data” qui permet d’accéder à la valeur de chacun des items dans une collection. Il existe plusieurs propriétés spéciales comme celle-ci, dont vous aurez probablement besoin. Vous pourrez les trouver ici en temps voulu.

Les événements

Dans l’exemple précédent, nous avons utilisé sans le mentionner, le binding “checked“, qui est un événement Javascript. Sa présence ne vous a peut-être pas posé de soucis de lecture et c’est typiquement ce qui est appréciable dans Knockout.

La plupart des événements que vous avez l’habitude d’utiliser sont implémentés de la même manière.

Les plus courants sont implémentés nativement en tant que binding :

• checked
• enable
• click
• submit

On peut, par exemple, associer une fonction “showSomeThings”, qui afficherait des éléments jusqu’ici cachés dans le DOM.

  <button data-bind="click: showSomeThings">Cliquez</button>

Pour les autres types d’événements, il faut utiliser le binding “event” et spécifier le nom de l’événement et la fonction appelée.

  <button data-bind="event:{ mousedown : downClick, mouseup: upClick } ">Cliquez</button>

Faites le test.

Les templates

Très souvent dans nos développements web, il est nécessaire de créer des structures HTML complexes, par exemple pour afficher une famille d’objets avec une arborescence, créer un tableau ou créer un repeater pour une collection d’objets. Bref, c’est très fréquent. Le templating est une méthode permettant de créer des blocs de markups “réutilisables”. C’est une méthode “propre” qui favorise la compréhension et la maintenabilité du code. Ces blocs de markups sont appelés “Engines“. KO enverra les valeurs des observables aux engines et elles seront affichées dans le DOM de votre page.

L’exemple suivant illustre l’implémentation d’un template:

 <!-- utilisation du template user-template -->
 <div data-bind="template: { name: 'user-template', data: user}"></div>

<!-- définition du template -->
<script type="text/html" id="user-template">
    <figure data-bind="attr: { id: prenom }">
        <img data-bind="attr: {src : avatar}" class="avatar"></img>
        <figcaption data-bind="text: fullname"></figcaption>
    </figure>
</script>

var User = function(nom, prenom, avatar){
    var self = this;
    self.nom = ko.observable(nom);
    self.prenom = ko.observable(prenom);
    self.avatar = avatar;
     self.fullname = ko.computed(function(){
        return self.prenom() + ' ' + self.nom();
     });
}

var appViewModel = {
  user: ko.observable(new User("Martin", "Jean", "img"))
}

Les  mots clés:

• name : Correspond à l’id du template que vous souhaitez lié.
• data : Permet de fournir un objet au template, afin d’y afficher ses propriétés.

Il y a encore quelques autres mots-clés que l’on peut utiliser. On peut, par exemple, intégrer l’itération d’une collection directement dans la directive de templating.

Vous trouverez dans ce snippet, une implémentation complète synthétisant l’ensemble des principes évoqués dans l’article.

Pour finir…

Knockout est très facile à prendre en main et fluide à utiliser, ce qui fait sa force, et nous avons pu le voir tout au long de l’article. Il représente une alternative simple pour construire des “single page applications” (SPA), face aux grands comme Angular, Backbone ou Ember.

Je viens d’un monde .Net et j’ai commencé l’apprentissage des SPA avec Angular.  J’ai eu l’opportunité d’expérimenter Knockout pour la première fois dans une mission, nous l’avons couplé avec Asp.Net MVC 5 et je dois dire que ça marche plutôt très bien. Il est d’ailleurs utilisé par de nombreux sites comme Asos. Jetez un œil aux statistiques.

Bien sûr, ce n’est qu’une introduction au framework. Vous pouvez aller plus loin en consultant le site officiel ou le blog de Ryan Niemeyer, qui est très actif sur le framework.

Image Knockout: M.Scapolan