Geddy, YUI App Framework, derby, meteor, ember.js… Voilà les quelques frameworks javascript qui m’ont paru mériter une exploration. J’ai été à la fois étonné par leurs possibilités et déçu par leur complexité qui m’a souvent paru inutile au regard des simples besoins des applications que je développe. J’en ai finalement retenu un, et j’admets avoir honte de ne l’avoir découvert que récemment. Il s’agit de knockout.js, un framework qui permet d’utiliser le modèle MVVM dans la création d’application client en javascript.
La documentation, bien qu’en anglais, est d’une simplicité assez difficile à égaler. Je n’entreprendrai donc pas un tutoriel sur son utilisation. Je tenterai plutôt de vous expliquer très simplement son fonctionnement et vous comprendrez comment il peut vous aider dans votre développement. J’aborderai ici le modèle MVVM et ses particularités pour le Web, le fonctionnement de base de knockout.js et, en dernier, comment gérer les URLs avec pager.js, le bras droit de knockout.js.
Le modèle MVVM
MVVM signifie Modèle Vue Vue-Modèle. C’est une variante de l’organisation MVC (Modèle Vue Contrôleur). Pour rappel, dans le modèle MVC :
- Le modèle est l’instance qui contient les différentes données qui alimentent l’application. C’est, sensiblement, le schéma d’une base de données.
- La vue est l’instance qui contient le rendu visuel. Dans une application Web, on parle de templates.
- Le contrôleur fait le lien entre le modèle et la vue. C’est lui qui détermine quelles données doivent être passées et à quelle vue elles doivent l’être.
Le modèle MVVM fonctionne un peu de la même façon, à la différence que le rôle du contrôleur est assumé partiellement par ce que l’on appelle une Vue-Modèle. Ici, je crois qu’une explication est de mise ! Dans knockout.js :
- Ne cherchez pas le « M » de « MVVM » dans knockout.js. On ne retrouve pas de modèle en tant que tel. Dans une application construite avec knockout.js, le modèle, s’il existe, se trouve sur le serveur. Personnellement, je trouve cela très logique. Dans des applications Web, le modèle sur l’application client est souvent une version épurée et partielle du modèle sur le serveur.
- Les vues sont écrites directement en HTML et knockout.js se charge de sélectionner les portions de code à afficher.
- Les Vues-Modèles sont des objets javascript dont les propriétés peuvent être affichées dans les vues et dont les fonctions peuvent être appelées suite à des événements. Contrairement au constructeur dans MVC, les Vues-Modèles ne commandent l’affichage d’aucun template.
Fonctionnement de base et exemple
Pour l’installation, sachez qu’il suffit d’inclure le fichier javascript de knockout.js que vous pouvez télécharger ici : http://knockoutjs.com/downloads/
Dans votre HTML, simplement :
Prenez ce code HTML en exemple :
Nom :
Prénom :
Et ce code javascript, avant votre