Introduction

Aujourd'hui il existe de nombreux framework JavaScript comme Knockout ( JQuery, Dojo, BackBone, AngularJS) et chacune possède des points forts/faibles comme la courbe d'apprentissage (KnockoutJS est bien plus simple et rapide à prendre en main qu'Angular), le nombre de fonctionnalités "utiles". Les caractéristiques de KnockoutJS sont:

• c'est une librairie légère (<60ko) et autonome (ne dépend pas d'autres frameworks)
• permet de structurer son code JavaScript de sorte à avoir un découpage claire en 3 composants du design pattern MVVM:

1. le Modèle: les données et comportement métiers généralement coté serveur via un appel de WebService comme Web API par exemple
2. la Vue: la partie visible de l'iceberg, c'est la partie UI
3. le ViewModel: la partie intelligente de votre interface, manipulant les données à afficher

Les points forts de Knockout sont les suivants:

• permet d'associer simplement les éléments du DOM avec son Model (en passant par le ViewModel) sans avoir à se préoccuper de son arborescence (n'utilise pas de sélecteurs CSS comme JQuery)
• facilite le rafraichissent en direct des éléments de la page
• gère les dépendance entre Modèles (par ex, il est possible de composer un Model à partir de plusieurs autres)
• Knockout dispose également d'une fonctionnalité de templating

Usage

1. inclure la version de Knockout voulue via un CDN ou en copiant le script en local <script src="/scripts/knockout/knockout-min.js"></script>
2. écrire sa Vue (donc son HTML) en incluant quelques attributs magiques ;) Coucou, je m'appel <span data-bind="text: myName"></span>
3. écrire son ViewModel en JavaScript: var monViewModel = { myName: 'Brooz' };
4. relier les 2 par l'instruction suivante toujours dans son JavaScript ko.applyBindings(monViewModel );

Comme on peu le remarquer il manque la partie Model du MVVM :) Comme indiqué plus haut, c'est la partie métier (ici la donnée myName: 'Brooz' pourrait provenir d'un WebService par ex).

Exemple

Liens

tuto du site officiel de KnockoutJS qui permet de s'exercer en live scripts KnockoutJS en CDN JSFiddle un éditeur Javascript online permettant de se faire des petits POC rapides