De website à webapp – Knockout JS
De website à webapp – Knockout JS
0 0
pres-humantalks-knockoutjs
Présentation faite aux Human Talks Grenoble d'Octobre 2013On Github remialvado / pres-humantalks-knockoutjs
De website à webapp
Knockout JS
Un principe fort : MVVM
Model : la représentation de vos données => des POJOs sous stéroïde View : un template HTML directement dans la page. View-Model : la glue permettant un lien bi-directionnel entre les deux.Quelques mot-clés / notions
Observable : un élément de model ou de vue que l'on peut observer Computed : un élément de model ou de vue qui est calculé en fonction d'un autre élement Binding : une action à déclencher suite à un évènement et pas mal d'autres... ET C'EST TOUT !!!Principale force : Gestion des dépendances
Account Balance
Status
Message
Alerte
# Model/account.js
define(["knockout", "sms-service"], function(ko, sms) {
return function account(name, balance) {
var self = this;
self.name = ko.observable(name);
self.balance = ko.observable(balance);
self.status = ko.computed(function() {
return self.balance() >= O ? "positive" : "negative";
});
self.message = ko.computed(function() {
return self.status() === "positive" ?
"vous avez encore de l'argent" :
"arrêtez de dépenser autant !!";
});
self.alerte = ko.computed(function() {
if (self.status() === "negative")
sms.send("Alerte !", "Account balance : " + self.balance());
});
}
}
Template
# View/account.html
<html>
<head>
<script src="knockout.js"></script>
<script src="account.js"></script>
</head>
<body>
...
<label>Balance :
<input data-binding="{value: balance, valueUpdate: 'afterkeydown'}" />
</label>
<p>
Status : <span><% status %></span>
</p>
<p>
Message : <span data-binding="{text: message}"></span>
</p>
...
</body>
</html>
Bindings
Text : visible, text, html, css, style, ... Control flow : foreach, if, with, ... Forms : value, submit, event, disable, click, checked, ...View Model
# Controller/bank.html
define(["knockout", "Model/account"],
function(ko, account) {
ko.applyBindings(
new account("Rémi Alvado", 0),
document.querySelector("body")
);
});
Tests
Unitaires : sur le model avec qunit, jasmine via zombie, nodejs, ... Fonctionnels : sur la vue avec jasmine via selenium, zombie, phantom, ...80 / 20
80% de Knockout en 7 minutes !