L’architecture MVVM
KnockoutJS
Jean-Baptiste Vigneron
j.vigneron@epsi.fr
@jbvigneron
David Bottiau
david.bottiau@epsi.fr
@...
KnockoutJS
• Framework pour le web
• Adaptation du MVVM côté client
• Décharge en partie le serveur
• Gratuit et Open Sour...
MVVM avec KnockoutJS
• Model
• Objets JavaScript ou JSON
• Utilisation de Webservices
• ViewModel
• Liaison avec le Model ...
Model or ViewModel ?
// Prototype
function todo() {
this.task = ko.observable(‘task to do’);
this.priority = ko.observable...
Les Observables
this.task = ko.observable(‘task to do’);
• Un seul mode de notifications : two-way
• Notifications
• De la...
Computed Observables
this.cost = ko.computed(function() {
return this.priority() * this.business();
}, this);
• Propriétés...
Observable arrays
var myArray = ko.observableArray(); // initialize
myArray.push(‘Some value’); // add an item
• Utilisés ...
Le Binding
Utilisation du ViewModel dans la vue
// Bind every properties of ViewModel to show them
Current task: <span dat...
Le Binding
Les propriétés
Propriété Utilisation
visible Afficher l’élément (du DOM) si la propriété est à « true »
text Af...
Exemple – Liste de tâches
Mettez le KO dans vos apps !
var todoViewModel = function (todos) {
var self = this;
// map arra...
Les Templates
Un UserControl ?
<div data-bind="template: { name: 'person-template', foreach: people }"></div>
<script type...
• KnockoutJS – knockoutjs.com
• Understanding MVVM for JavaScript -
http://addyosmani.com/blog/understanding-mvvm-a-guide-...
Prochain SlideShare
Chargement dans…5
×

L'architecture MVVM avec KnockoutJS

996 vues

Publié le

Publié dans : Logiciels
0 commentaire
2 j’aime
Statistiques
Remarques
  • Soyez le premier à commenter

Aucun téléchargement
Vues
Nombre de vues
996
Sur SlideShare
0
Issues des intégrations
0
Intégrations
230
Actions
Partages
0
Téléchargements
19
Commentaires
0
J’aime
2
Intégrations 0
Aucune incorporation

Aucune remarque pour cette diapositive

L'architecture MVVM avec KnockoutJS

  1. 1. L’architecture MVVM KnockoutJS Jean-Baptiste Vigneron j.vigneron@epsi.fr @jbvigneron David Bottiau david.bottiau@epsi.fr @dbottiau
  2. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 12. • KnockoutJS – knockoutjs.com • Understanding MVVM for JavaScript - http://addyosmani.com/blog/understanding-mvvm-a-guide- for-javascript-developers/

×