1. L’architecture MVVM
KnockoutJS
Jean-Baptiste Vigneron
j.vigneron@epsi.fr
@jbvigneron
David Bottiau
david.bottiau@epsi.fr
@dbottiau

2. KnockoutJS
• Framework pour le web
• Adaptation du MVVM côté client
• Décharge en partie le serveur
• Gratuit et Open Source
• Utilisable avec n’importe quelle technologie
• ASP.NET MVC
• Ruby on Rails
• node.js
• Utilisation maximale de Binding et d’Observable
• JSON via AJAX plutôt que le rappel des pages
• Téléchargeable sur knockoutjs.com ou via NuGet

3. MVVM avec KnockoutJS
• Model
• Objets JavaScript ou JSON
• Utilisation de Webservices
• ViewModel
• Liaison avec le Model (CRUD, appels AJAX)
• Liaison avec la View (notifications, animations)
• View
• Langage HTML
• Styles et animations CSS

4. Model or ViewModel ?
// Prototype
function todo() {
this.task = ko.observable(‘task to do’);
this.priority = ko.observable(5);
this.business = ko.observable(300);
this.state = ko.observable(‘new’);
};
// Add ViewModel to bind with the view
ko.applyBindings(new todo());

5. Les Observables
this.task = ko.observable(‘task to do’);
• Un seul mode de notifications : two-way
• Notifications
• De la vue au ViewModel
• Du ViewModel à la vue
• Permet d’avoir une vue plus dynamique
• Différents types
• Nombre
• Chaîne de caractères

6. Computed Observables
this.cost = ko.computed(function() {
return this.priority() * this.business();
}, this);
• Propriétés utilisées quand elles dépendent d’autres
observables
• Création de « converters »

7. Observable arrays
var myArray = ko.observableArray(); // initialize
myArray.push(‘Some value’); // add an item
• Utilisés pour lier des listes à la vue
• Notifications lors d’un ajout ou d’une suppression
• Méthodes de tris
• Méthodes de sélection dans une liste

8. Le Binding
Utilisation du ViewModel dans la vue
// Bind every properties of ViewModel to show them
Current task: <span data-bind="text: task"></span>
Priority: <span data-bind="text: priority"></span>
Business: <span data-bind="text: business"></span>
State: <span data-bind="text: state"></span>
// Bind every properties of ViewModel to update them
Current task: <input type="text" data-bind="value: task" />
Priority: <input type="number" data-bind="value: priority" />
Business: <input type="number" data-bind="value: business" />
State: <input type="text" data-bind="value: state" />

9. Le Binding
Les propriétés
Propriété Utilisation
visible Afficher l’élément (du DOM) si la propriété est à « true »
text Afficher la valeur contenu dans la propriété
css Utiliser une classe CSS en fonction de la valeur d’une propriété
foreach Création de la partie du DOM sous-jacente pour tous les éléments
de la collection
if / ifnot Afficher l’élément du DOM. A la différence de « visible », le « if »
supprime physiquement de manière temporaire l’élément
click Exécute un événement dans le ViewModel lors du clic
enable Active/Désactive un élément en fonction de la propriété
value Modification de la propriété à partir de la vue
checked Modification d’une propriété booléenne à partir de la vue

10. Exemple – Liste de tâches
Mettez le KO dans vos apps !
var todoViewModel = function (todos) {
var self = this;
// map array of passed in todos to an observableArray of Todo objects
self.todos = ko.observableArray(ko.utils.arrayMap(todos, function (todo) {
return new Todo(todo.content, todo.done);
}));
// store the new todo value being entered
self.current = ko.observable();
// remove a single todo
self.remove = function (todo) {
self.todos.remove(todo);
};
// more methods
};

11. Les Templates
Un UserControl ?
<div data-bind="template: { name: 'person-template', foreach: people }"></div>
<script type="text/html" id="person-template">
<h3 data-bind="text: name"></h3>
<p>Credits: <span data-bind="text: credits"></span></p>
</script>
• Généralement utilisés avec une liste (foreach)
• Création du code HTML réutilisable dans la vue

12. • KnockoutJS – knockoutjs.com
• Understanding MVVM for JavaScript -
http://addyosmani.com/blog/understanding-mvvm-a-guide-
for-javascript-developers/