Téléchargé 22 fois
L'architecture MVVM avec KnockoutJS
- 1.
- 2. KnockoutJS • Framework pourle 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 duViewModel 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 – Listede 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/