Dans quelques instants, je vais vous présenter une méthode pour simplifier le développement de vos vues grâce à un framework Javascript qui va vraiment vous apporter du changement dans votre manière de travailler.

Vous avez sûrement déjà essayé de coder des interfaces graphiques complexes avec des mises à jour dans tous les sens… Si je change cette dropdown, il faut mettre ce champ là à jour… Bref, nous connaissons tous ce type de mécanisme dans le Web.

Pour mettre en place cette logique d’affichage, le plus simple est d’écrire du code Javascript et de le lier à des évènements des composants sur la page (par exemple l’évènement Change d’une Dropdown list ou d’une Textbox).

Seulement voilà, écrire du code comme ceci « à la main » fonctionne bien quand vous avez 2 ou 3 règles à gérer. Et donc comment allez-vous écrire le code quand il y a 20 champs à mettre à jour ? Et surtout, comment allez-vous assurer une maintenabilité idéale (éviter le code spaghetti…) ?

Dans cet article, je vous présente le framework KnockoutJS. Il s’agit d’un script que vous pouvez ajouter gratuitement dans vos pages web et qui va réellement simplifier la manière dont vous gérer les mises à jour des contrôles et du DOM.

Je tiens à préciser que ce framework est aujourd’hui largement utilisé et possède une grande communauté de développeurs. Il s’agit donc d’un outil mature que l’on peut utiliser dans des produits commerciaux si nécessaire.

Comment fonctionne KnockoutJS ?

En fait, KnockoutJS est une bibliothèque de fichiers en Javascript qui permet d’implémenter le pattern MVVM (Modèle-Vue-VueModèle, à ne pas confondre avec MVC – en savoir plus).

MVVM permet de créer une liaison dynamique entre un modèle de données et une vue. Le concept est proche de MVC sauf qu’il n’y a pas de contrôleur (donc pas de gestion de comportement spécifique).

Prenons un exemple simple pour comprendre comment ça fontionne :

• Votre interface affiche une fiche utilisateur qui comporte trois champs : un nom, un prénom et un champ pour l’age.
• En javascript, vous allez mettre en place un objet qui contient trois propriétés (nom, prénom et age).
• Cet objet sera ensuite lié aux contrôles graphiques avec KnockoutJS.
• La liaison dynamique permet de mettre à jour le modèle automatiquement dès qu’un champ de texte sera modifié (et inversement).

Exemple 1 : liaison simple

Voici un exemple concret en Javascript. Nous commençons par déclarer le ViewModel qui contient les données de liaison.

[javascript] var myViewModel = {
personFirstName: ‘John’,
personLastName: ‘Doe’,
personAge: 24
};

// ceci permet de mettre en place la liaison de données
ko.applyBindings(myViewModel);
[/javascript]

Ensuite, nous déclarons les liaisons avec notre vue dans le code HTML :

[html] Prénom : <span data-bind="text: personFirstName"></span>
Nom : <span data-bind="text: personLastName"></span>
Age : <span data-bind="text: personAge"></span>
[/html]

Mais où est donc notre Model ?
En fait, le modèle provient le plus souvent du serveur. Dans le cas des applications riches utilisant Ajax, le modèle peut être récupéré par une requête Ajax qui retournerait un objet en JSON.
Lorsque les choses sont bien faites, il est même possible que le Model soit identique au ViewModel.

Le résultat ?

En fait, ce morceau de code permet de mettre à jour les différents « span » à partir du ViewModel « myViewModel ».
Nous allons voir dans l’exemple 2, comment mettre en place une liaison bi-directionnelle.

Exemple 2 : liaison dynamique avec des Observables

Dans l’exemple précédant, nous avons vu comment mettre à jour le DOM de la vue à partir d’un objet Javascript.
Comme annoncé au début de l’article, KnockoutJS permet de créer des liaisons dynamiques et donc de répercuter les changements automatiquement (si A et B sont liés alors la modification de A entraîne la mise à jour de B et inversement).

Pour créer ces liaisons dynamiques, il suffit de déclarer le ViewModel de la manière suivante :

[javascript] var myViewModel = {
personFirstName: ko.observable(‘John’),
personLastName: ko.observable(‘Doe’),
personAge: ko.observable(24)
};
[/javascript]

A partir de ce moment, nous pouvons récupérer ou modifier la valeur d’une propriété :

[javascript] // lecture
var valeur = myViewModel.personFirstName();

// mise à jour
myViewModel.personFirstName(‘Robert’);
[/javascript]

Comment simplifier les vues avec KnockoutJS ?

Nous venons de voir comment utiliser KnockoutJS sur des vues simples.
Ce framework permet de créer des liaisons de données à l’aide de déclaration dans le code HTML.

Grâce à ces mécanismes, il est possible de coder le fonctionnel de l’interface graphique de manière complètement différente.

Voici quelques exemples de ce que l’on peut faire avec les bindings :

Activer / Désactiver un bouton en fonction du nombre d’éléments
[html]data-bind="enable: items().length < 10"[/html]

Afficher / Cacher un élément
[html]data-bind="visible: !hiddenFlag()"[/html]

Définir une classe CSS en fonction d’un état
[html]data-bind="css: { success: selectedItem().isSaved(), error: !selectedItem().isSaved() }"[/html]

Définir un évènement sur click
[html]data-bind="click: function() { viewModel.selectItem($data); }[/html]

Pour aller plus loin

J’espère que cet article vous aura donné envie de découvrir KnockoutJS. Ce framework est très puissant et permet de simplifier la manière d’écrire vos vues pour le Web. Essayer KnockoutJS c’est l’adopter !

• Pour aller plus loin, je vous ai préparé une fiche PDF que vous pouvez télécharger (accessible pour les membres de DotnetDojo). Cette fiche regroupe toutes les ressources nécessaires pour démarrer avec ce framework.

[sociallocker] Télécharger la fiche PDF complémentaire
[/sociallocker]