Knockout – Simplification des affichages HTML / JS

Lire http://www.dotnetdojo.com/simplifier-vues-avec-knockoutjs/

Voir aussi http://knockoutjs.com/documentation/introduction.html et le tutoriel http://learn.knockoutjs.com/

Il s’agit d’un framework MVVM (Modèle – Vue – VueModèle) qui permet de lier dynamiquement un objet défini en Javascript avec un modèle HTML.

Exemple :

var myViewModel = {
    personFirstName: 'John',
    personLastName: 'Doe',
    personAge: 24
};

// ceci permet de mettre en place la liaison de données
ko.applyBindings(myViewModel);

Et liaison avec un modèle (un template) comme celui-ci :

Prénom : <span data-bind="text: personFirstName"></span>
Nom : <span data-bind="text: personLastName"></span>
Age : <span data-bind="text: personAge"></span>

Avec cet exemple

<p>First name: <input data-bind="value: firstName"></p>
<p>Last name: <input data-bind="value: lastName"></p>

<p>Coucou <strong data-bind="text: firstName"></strong></p>

et ce script

// This is a simple *viewmodel* - JavaScript that defines the data and behavior of your UI
function AppViewModel() {
    this.firstName = ko.observable("Bert");
    this.lastName = ko.observable("Bertington");
}

// Activates knockout.js
ko.applyBindings(new AppViewModel());

On obtient un formulaire comme ci-dessous avec l’intérêt que si on change le prénom, au moment de quitter la zone, la mise à jour de “Coucou” est automatisée puisqu’il y a un observable sur le prénom.

image