Simplifiez vos vues avec KnockoutJS

Pour beaucoup d'entre nous, la réalisation de sites Web n'est pas très complexe à mettre en oeuvre. L'utilisation classique de MVC rend l'industrialisation de sites Web plus facile. Cependant, nombre d'entre nous se confronte à leur pire ennemi : Le JavaScript. En réalité, personne ne peut y échapper, ne serait-ce que pour la manipulation des éléments du DOM. De plus, aujourd’hui, de nombreux Frameworks JS existent pour faciliter la prise en main et le développement de pages web. KnockoutJs (KO) fait partie de ces Frameworks.

Qu'est-ce que c'est

KnockoutJS est une bibliothèque de fichiers en Javascript qui permet d’implémenter le pattern MVVM (Model-View-ViewModel). Pour rappel, MVVM permet la séparation entre l’interface graphique et la couche logique d’une application Web. Sa logique repose sur le data-binding entre la View et la ViewModel.

KnockoutJS permet de créer des interfaces utilisateurs d'auto-mise à jour des objets Javascript. Ses atouts :

Bibliothèque JavaScript très petite et légère, "open source" qui fonctionne avec tous les Frameworks web.

KnockoutJS est entièrement documenté. Le site officiel a une documentation complète, y compris documentation de l'API, des exemples et des didacticiels interactifs.

Fonctionne sur tous les navigateurs courants (IE 6+, Firefox 2+, Chrome, Safari, Edge, etc.)

Principes de fonctionnement, OK-KO ?

Le fonctionnement de KnockoutJS repose sur 3 principes qui constituent les piliers du Framework :

Observables & Dependency Tracking

Declarative Bindings

Templates

Prenons un exemple. Je souhaite afficher dynamiquement le nom de l'entreprise de chaque personne à la sélection de la liste déroulante.

<html>
<head>
<title>Ma première page avec Knockout JS</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.1/knockout-min.js" type="text/javascript"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
</head>
<body>
 <div class="row">                
 <div class="col-xs-6 col-sm-6">
  <div class="form-group">
   <label for="filial">
    Nom :
   </label>
   <select id="filial" class="form-control" data-bind="options: Names, optionsText: 'Name', optionsValue: 'Id', value: NameId, optionsCaption: 'Sélectionner un nom', event:{ change: function () {GetInfo()}}"></select>
  </div>
 </div>
</div>
<p data-bind="if: NameId() > 0">Je travaille dans l'agence de <span style="font-weight: bold; color:blue;" data-bind="text: CompanyName()"></span></p>
</body>
</html>

La vue

var data = [
{Name:'Astérix', Id:1, CompanyName:'Netapsys Paris'},
{Name:'Obélix', Id:2, CompanyName:'Netapsys Lyon'},
{Name:'Idéfix', Id:3, CompanyName:'Netapsys Nantes'},
{Name:'Panoramix', Id:4, CompanyName:'Netapsys Rennes'},
{Name:'Abraracourcix', Id:5, CompanyName:'Netapsys Lille'},
{Name:'Amérix', Id:6, CompanyName:'Netapsys Strasbourg'},
{Name:'Tounedix', Id:7, CompanyName:'Netapsys Antananarivo'}
];
var ViewModel = function () {
this.Names = ko.observableArray(data);
this.CompanyName = ko.observable();
this.NameId = ko.observable();
};
function GetInfo()
{
var result = Names().filter(function (i) {
return ((typeof (NameId()) !== "undefined" ? (i.Id === NameId()) : true));
});
CompanyName(result[0].CompanyName);
}
ko.applyBindings(ViewModel());

Le javascript

Ce morceau de code permet de mettre à jour le paragraphe à partir du ViewModel « ViewModel ».
KO 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.

Par exemple, dans notre vue nous avons la déclaration "if" qui nous permet d'afficher le paragraphe uniquement dans le cas d'une sélection d'un collaborateur dans la liste déroulante.

Voici d'autres exemples de ce que l’on peut faire avec les bindings :

Activer / Désactiver un bouton en fonction du nombre d’éléments

data-bind="enable: items().length < 10"

Afficher / Cacher un élément

data-bind="visible: !hiddenFlag()"

Définir une classe CSS en fonction d’un état

data-bind="css: { success: selectedItem().isSaved(), error: !selectedItem().isSaved() }"

Définir un événement sur click

data-bind="click: function() { viewModel.selectItem($data); }

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>

Exemple

Conclusion

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. Il représente une alternative simple pour construire des “single page applications” (SPA), face aux grands comme Angular, Backbone ou Ember.

J’ai eu l’opportunité d’expérimenter Knockout 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 web. Jetez un œil aux statistiques.

Je vous conseille de jeter un œil sur le site de KnockoutJS, cela vous aidera davantage dans la compréhension de ce Framework.

Bon dev à tous !

Le blog