Alphorm.com Formation knockoutJS

Présentation
de la formation
KnockoutJS
Formation KnockoutJS alphorm.com™©
Djamel BOUCHOUCHA
Formateur et Consultant .NET
Contact : contact@donext.fr
KnockoutJS
Site : http://www.alphorm.com
Blog : http://blog.alphorm.com
Forum : http://forum.alphorm.com

Plan
• Présentation de votre formateur
• Qu’est ce que c’est KnockoutJS?
• Présentation de votre formation
• Le plan de la formation
• Publics concernés
• Prérequis de la formation

Votre formateur
• Djamel BOUCHOUCHA
• Consultant .NET et formateur
• contact@donext.fr
• Compétences :
Web : ASP.NET, PHP, HTML5, CSS3, JavaScript, Web Service, WCF, RestFul, AngularJS,
Web : ASP.NET, PHP, HTML5, CSS3, JavaScript, Web Service, WCF, RestFul, AngularJS,
KnockoutJS
Autres: C#, XAML, WPF, JAVA, C++, C, SQL, Cloud (Azure), iOS, Android, WP
• Références :
Profil Linkedin : fr.linkedin.com/pub/djamel-bouchoucha/57/210/572/
Profil Alphorm : http://www.alphorm.com/formateur/djamel-bouchoucha

Mes formations sur Alphorm

Qu’est ce que c’est KnockoutJS?
• Un framework permettant de créer des application riches, responsive
et des vues dynamiques à l’aide d’un modèle de données.
• Un framework permettant de séparer votre « front » en plusieurs
« couches »
• Le lien « bind » entre la vue et le modèle est effectué sur les éléments
du DOM directement. (Binding déclarative)
du DOM directement. (Binding déclarative)
• Il est :
Gratuit et Open Source
Pure JavaScript (marche avec n’importe quel framework)
Léger (40 kb)
Supporte la plupart des navigateurs !

Présentation de votre formation
• Apprentissage de knockoutJS
• Création d’un projet Web Complet
• Découverte de nodejs, bower et express

Le plan de la formation
• Installation des prérequis
• Présentation de Knockout
• Les bases de knockout
• Knockout avancé
• Finalisation du projet

Publics concernés
• Développeur web
• Développeur WPF avec des connaissances en MVVM
• Curieux, ayant des notions de JavaScript
• Tout le monde avec un peu de travail en parallèle ☺

Prérequis de la formation
• Connaissance de base du développement web :
HTML
CSS
JavaScript
• Aucun autre langage n’est nécessaire
• Aucun autre langage n’est nécessaire

D’autres formations en programmation sur Alphorm

Are you ready ? ☺

Présentation
Le projet
Djamel BOUCHOUCHA
Présentation
du projet

Plan
• Gestion des contacts
• Le back-end à l’aide de nodeJS, expressJS
• Le front à l’aide de bower, jquery, bootstrap et knockoutJS

Gestion des contacts
• Création/Modification de contacts
Un objet contact est composé des éléments suivants : id, nom, prénom, mail,
numéro de téléphone, adresse et date de naissance
• Création/Modification de groupe
Un groupe est un ensemble de contacts, il est représenté ainsi : id, nom du
Un groupe est un ensemble de contacts, il est représenté ainsi : id, nom du
groupe, description et la liste des contacts
• Création/Modification d’un agenda
Permet de gérer les rendez-vous avec ses contacts, il est composé des
propriétés suivantes : id, lieu, date de début et date de fin du rendez-vous, et
d’une liste de contacts participant à l’événement

Back-end
• NodeJS, pour la partie serveur
• ExpressJS, pour l’exposition de la couche service au travers de nodeJS
• Aucune persistance pour le moment, à chaque redémarrage du service
les données sont perdues

Front-end
• Bower gestionnaire de package
• Jquery (une dépendance de knockout.js), framework JS
• Bootstrap (pour la partie présentation), framework de présentation
• KnockoutJS

Ce que l’on a couvert
• Notre projet du back-end au front-end
• Les différentes technologies que nous allons utiliser
• JavaScript à l’honneur !

NodeJS
Le projet
Djamel BOUCHOUCHA
NodeJS

Plan
• Présentation de NodeJS
• Découverte de npm
• Installation de NodeJS

Présentation
• JavaScript côté serveur (puissance et souplesse du JS côté serveur)
• Moteur d’exécution JavaScript de Chrome (V8)
• Programmation évènementielle
• Mode asynchrone (I/O)
• Modulable et évolutive
• Forte communauté !
• Pour en savoir plus en attendant la formation Alphorm :
http://nodeschool.io/

Découverte de npm
• Gestionnaire de package
• Permet de partager et récupérer les contributions de la communauté
• NPM : Node Package Manager ? Non, c’est juste « npm is not an
acronym » ☺
• NodeJS pour lancer notre programme et npm pour télécharger nos
• NodeJS pour lancer notre programme et npm pour télécharger nos
packages, comme express par exemple

Installation
• Aller sur https://nodejs.org/ (installation valable pour Windows/Linux et
Mac OS)
• Démo : Installation sur Windows et Linux

• NodeJS et ses avantages
• Nous avons connaissance de npm
• Nous avons installé nodeJS sur Windows et Linux !

Bower
Le projet
Djamel BOUCHOUCHA
Bower

Plan
• Présentation de Bower
• Installation de Bower
• Utilisation de Bower

Présentation
• Qu’est ce qu’une dépendance ?
• Gestion de dépendance ?
• Quelles dépendances ?

Installation
• Installation à l’aide de npm
•npm install –g bower
• Démo : sur windows et linux

Utilisation
• Magique : bower install « something »
• Liste des packages disponibles : http://bower.io/search

• L’installation et l’utilisation de bower

ExpressJS
Le projet
Djamel BOUCHOUCHA
ExpressJS

Plan
• Présentation
• Installation
• Démo

Présentation
• Comment gérer les routes sous nodeJS ?
Utilisation de if pour chaque requête ? If(page == ‘’/’’) dosomething(); else…
Utiliser un framework pour le faire proprement ? ExpressJS !
• Utilisation des templates

Installation
• Grâce à npm
• La commande : npm install express --save
• Démo : sur Linux et Windows

Démo
// url localhost:8888/Hello en utilisant un GET
app.get('/Hello', function (req, res) { res.send(‘Bienvenue chez Alphorm !'); });
// url localhost:8888/Hello en utilisant un POST
app.post('/Hello', function (req, res) { res.send(‘Votre ajout a bien été pris en compte, merci !'); });
app.put('/Hello', function (req, res) { res.send(‘Votre mise à jour a bien été prise en compte, merci !'); });
app.delete('/Hello', function (req, res) { res.send(‘Votre suppression a bien été prise en compte, merci !'); });

• L’installation et l’utilisation d’ExpressJS

Le Backoffice
Le projet
Djamel BOUCHOUCHA
Le Backoffice

Plan
• Création du projet
• Création des différentes routes
• Préparation de la partie front-end
• Démo

Création du projet
• Installation de nodeJS
• Installation de bower
• Installation d’ExpressJS

Création des différentes routes
• Configuration d’ExpressJS
• Les routes pour la gestion des contacts
• Les routes pour la gestion des groupes
• Les routes pour la gestion des meetings

Préparation de la partie front-end
• Configuration d’ExpressJS pour exposer les parties statiques du front-
end (images, css, js et html)
• Installation des différentes librairies JS/CSS à l’aide de bower

Démo
• Test des différents chemins de notre API et des pages du front-end
• Avec quoi ? Le navigateur ? Postman sous chrome

• Nous avons réalisé notre back-end, ce dernier sera enrichi au fur et à
mesure que nous avancerons dans notre formation

Introduction
Présentation
de knockoutJS
Djamel BOUCHOUCHA
Introduction

Plan
• Application classique de gestion des contacts
• Utilisation d’un framework de binding

Application classique de gestion des contacts
• Utilisation d’API
• Utilisation de JQuery pour remplacer les éléments dans le DOM
• Mélange de HTML et de JS
• Utilisation de framework pour assurer le binding (angularJS, KnockoutJS
etc…)
etc…)
• On peut également utiliser un moteur de template (EJS, Jade, Mustache
…)

Utilisation d’un framework de binding ?
• Qu’est ce que le binding ?
• Les avantages ?
Se concentrer uniquement sur les données
Alléger les données envoyées par le serveur, juste du json ou du xml
Réutilisation du code simplifié
Réutilisation du code simplifié
• Démo de binding avec AngularJS et knockoutJS

• On peut faire de différentes façons notre application, mais ici nous
allons le faire bien, nous allons le faire à l’aide de knockoutJS !

Qu’est ce que
Présentation
de knockoutJS
Djamel BOUCHOUCHA
Qu’est ce que
knockoutJS ?

Plan
• Présentation
• Démo

Présentation
• Créer un lien entre les données et la vue (le binding)
• Pourquoi ?
• Comment ?
• MVVM

Démo
• Une démo de l’utilisation de knockoutJS

• On est entré dans le vif du sujet ☺ en découvrant knockoutJS !
• On a vu en quoi et comment utiliser knockoutJS

Pattern MVVM
Présentation
de knockoutJS
Djamel BOUCHOUCHA
Pattern MVVM

Plan
• Présentation
• MVVM et knockoutJS

Présentation
ViewModel
ModelView

MVVM et knockoutJS
• View : les différents éléments HTML, CSS et JavaScript
• ViewModel : knockoutJS, partie permettant de faire le lien entre la vue
et le modèle
• Model : back-end

• Découvrir le pattern MVVM et savoir l’utiliser

Prérequis
Présentation
de knockoutJS
Djamel BOUCHOUCHA
Prérequis

Plan
• Un peu de JavaScript
• HTML, CSS

Un peu de javascript
• Les variables
• Les fonctions
• Les conditions
• Les boucles
• Les tableaux
• Le scope
• Les types

HTML et CSS
• Les bases du HTML
• Les bases du CSS
• Bootstrap

• Des rappels sur les bases du JavaScript, HTML et CSS

Le ViewModel
Les bases de knockoutJS
Djamel BOUCHOUCHA
Le ViewModel

Plan
• L’importance du ViewModel
• Application du ViewModel (binding)

L’importance du ViewModel
• Le ViewModel expose des propriétés à la vue
• Le ViewModel transforme les données récupérées depuis la couche
« Model »
• Le ViewModel « réagit » aux actions utilisateurs
• Le ViewModel peut être réutilisé
• Le ViewModel peut être réutilisé

Création du projet
• Création du fichier « index.html » et import des librairies nécessaires
• Création du fichier « contact.js »
Approche « module »
Exposition de la fonction « init » uniquement
Association de « contact.js » à « index.html »
• Association de « contact.js » à « index.html »

Application du ViewModel (binding)
• Définition du ViewModel
• Association du ViewModel à knockoutJS
• Option : possibilité d’associer le « context » de binding à un élément du
DOM, par défaut sur body.
var monViewModel = {
Nom: ‘James',
Age: 28
};
ko.applyBindings(monViewModel);

• Le View Model
• La création du projet

Les trois fonctions
Djamel BOUCHOUCHA
Les trois fonctions
de base

Plan
• Observable
• ObservableArray
• Computed

Observable
• Une propriété observée par knockoutJS, permet de notifier tous les
éléments « associés » en cas de changement.
• Il suffit d’associer un « objet » de type « observable » à une propriété
exposée
• Comment mettre à jour la valeur d’une propriété observable ?
Nom("Nouveau") var monViewModel = {
Nom: ko.observable(‘James‘),
Age: 28
};

ObservableArray
• Même principe que pour observable, à la différence, comme son nom
l’indique, qu’elle permet de créer une propriété observable de type
tableau (Array)
• Permet d’associer n’importe quel type de tableau (numeric, chaine de
caractère, objet …)
var monViewModel = {
var departements = ko.observableArray()
departements.push("Paris");
};

Computed
• Un minimum de logique dans la vue !
• Permet d’utiliser les différents observables pour exposer une nouvelle
propriété !
• Exemple : un ViewModel expose un nom et un prénom, une computed
pourrait exposer la propriété « NomComplet » pour renvoyer la
concaténation du nom et du prénom
concaténation du nom et du prénom
this.nomComplet = ko.computed(function() {
return this.prenom() + " " + this.nom();
});

Ce qu’on a couvert
• Les trois fonctions de base !
• Une grande partie de vos besoins est couverte par ces trois fonctions.
• Observable, ObservableArray et computed

Contrôle du texte
Djamel BOUCHOUCHA
Contrôle du texte
et de l’apparence

Plan
• Le contrôle de la visibilité
• Le contrôle de la génération du texte
• Le contrôle du rendu HTML
• Le contrôle du style (CSS)

Le contrôle de la visibilité
• L’utilisation du paramètre « visible »
• Un « false », « 0 », « null » ou « undefined » entraine la non visibilité de
l’élément
• Un « true » ou « 1 » entraine la visibilité de l’élément
• L’utilisation de visible est comparable à l’utilisation du style « display » à
• L’utilisation de visible est comparable à l’utilisation du style « display » à
none

Le contrôle de la génération du texte
• L’utilisation du paramètre « text »
• Si la propriété est différente d’un chiffre ou d’une chaine de caractères,
c’est la fonction « toString() » qui sera appelée sur l’objet.
• On peut utiliser ce paramètre pour afficher un simple message, un
message suite à un calcul, du HTML (*)
• Attention avec le select/option !

Le contrôle du rendu HTML
• L’utilisation du paramètre « html »
• Différence avec le paramètre « text » ?
• C’est l’équivalent du « innerHTML » (utilisation de la fonction html() en
jQuery)

Le contrôle du style (CSS)
• L’utilisation des paramètres « css » et « style »
• Le paramètre « css » lie votre objet aux paramètres de « class » des
éléments
• Le paramètre « style » lie votre objet aux paramètres de « style » des
éléments
• Attention pour le style, il faut écrire « fontWeight » et non « font-
weight ». Faire sauter les « - »

• Les différentes façons de contrôler l’apparence de notre page
• Aussi bien le style que la génération de contenu

Contrôle du flux
Djamel BOUCHOUCHA
Contrôle du flux
de l’application

Plan
• La boucle « foreach »
• Les conditions « if, else, if else, if not »
• Le binding « with »

La boucle « foreach »
<table>
<thead>
<tr><th>Prénom</th>
<th>Nom</th></tr>
</thead>
<tbody data-bind="foreach: people">
<tr>
<td data-bind="text: prenom"></td>
<td data-bind="text: nom"></td>
</tr>
</tbody>
</tbody>
</table>
<script type="text/javascript">
ko.applyBindings({
contact: [
{ prenom: 'Daniel', nom: 'Bazz' },
{ prenom : 'Eric', nom: 'Caen' },
{ prenom : 'Djamel', nom: 'BOUCHOUCHA' }
]
});
</script>

Les conditions « if, else, if else, if not »
• Plus simple, on met un if en place
• On peut obtenir le « else » avec la syntaxe suivante : « maVerification »
? « action en cas de réussite de la vérification » ? « autre action »
• « Ifnot » équivalent de la de différent « ! »
• Démo !
• Démo !

Le binding « with »
• Context de binding ! Ne descend pas si l’élément est nul
• Accès au parent avec le mot clé « $parent »
• Accès au nœud principal avec le mot clé « $root

• La gestion du flux avec knockoutJS
• On peut maintenant contrôler notre affichage et nos actions en fonction
de nos conditions !

Binding avec
Djamel BOUCHOUCHA
Binding avec
les éléments du DOM

Plan
• L’évènement clique
• Les autres évènements
• La soumission
• L’état (activé/désactivé)
• Liaison avec la saisie utilisateur
• Le focus d’un contrôle
• Checkbox et radio buttons
• Les listes déroulantes

Les évènements
• Possibilité de lier l’évènement clique à une action de votre ViewModel
• Le binding « click »
• Deux paramètres « data » et « event »
• Dans le cas d’une boucle, on récupère le « current item » (data)
<button data-bind="click: clickMe">Click me</button>
• L’event est l’objet contenant des informations utilisateurs (Ex. touche en
cours)
• Empêcher la propagation de l’évènement avec l’option « clickBubble »
<button data-bind="click: myButtonHandler, clickBubble: false"> Click me </button>

Les autres évènements
• Possibilité de lier un évènement à une fonction de votre ViewModel
• Récupération du contexte de l’élément en cours
• Binding grâce au mot clé « event »
• Trois principaux events :
Mouseover
Mouseout
Keypress
<div data-bind="event: { mouseover: enable, mouseout: disable }"> Mouse over :) </div>

La soumission
• Permet de contrôler la soumission de votre formulaire
• Renvoyer « true » si vous souhaitez continuer l’action normalement
• Prend en paramètre votre « formulaire »
<form data-bind="submit: doSomething">
Vos différents composants <button type="submit">Envoyer</button>
</form>
var viewModel = { doSomething : function(formElement) { } };
</script>

L’état (activé/désactivé)
• Permet de gérer l’état d’un contrôle
• Mot-clé « enable »
<p> Votre adresse : <input type='text' data-bind="value: adresse, enable:
canEditAdresse" /> </p>
canEditAdresse" /> </p>

Liaison avec la saisie utilisateur
• Permet de récupérer la saisie utilisateur dans un « input », « textbox » et
le choix d’un utilisateur dans un « select »
• Mot-clé « value », et « valueUpdate » en option
• ValueUpdate permet de définir la politique de mise à jour (keyup,
keypress, afterkeydown)
• Mise à jour automatique à l’aide de « textInput »
• Cas spécifique pour les listes, deux slides plus loin
<p>Login: <input data-bind="value: login" /></p> <p>Mot de passe: <input type="password" data-
bind="value: pwd" /></p>

Le focus d’un contrôle
• Permet de donner le focus à un contrôle en le liant à votre ViewModel
• Mot-clé « hasFocus »
<input data-bind="hasFocus: isSelected" />

Checkbox et radio buttons
• Permet de lier les choix utilisateurs à votre ViewModel
• Pour les « checkbox » c’est assez simple, on gère l’état sélectionné ou
pas
• Pour les éléments de type « radio », on bind à la valeur du contrôle
<p>Recevoir la newsletter alphorm ?: <input type="checkbox" data-bind="checked: alphormNewsletter" /></p>
<div data-bind="visible: newsletterType"> Type de newslleter :
<div data-bind="visible: newsletterType"> Type de newslleter :
<div>
<input type="radio" name="newsletterType" value="dev" data-bind="checked: newsletterType" /> Développement
</div>
<div>
<input type="radio" name="flavorGroup" value="sys" data-bind="checked: newsletterType" /> Système
</div>
</div>
var viewModel = {
alphormNewsletter: ko.observable(true),
newsletterType: ko.observable("dev");
};
</script>

Les listes déroulantes
• Permet de binder un tableau à un élément de type « listbox »
• Plusieurs mots-clés :
Options, liste des éléments à afficher
OptionsText, propriété du modèle qui sera utilisé pour être affiché
OptionsValue, propriété du modèle qui sera utilisé comme valeur
OptionsValue, propriété du modèle qui sera utilisé comme valeur
Value, élément sélectionné, si le multi-select n’est pas activé
OptionsCaption, élément par défaut si rien n’est sélectionné
SelectedOptions, éléments sélectionnés
• Démo ☺

• Les différentes façons de se lier aux éléments du DOM

Le context de binding
KnockoutJS avancé
Djamel BOUCHOUCHA
Le context de binding

Plan
• Qu’est ce que le context ?
• La notion de parent
• La notion de root
• La notion de data
• La notion d’index

Qu’est ce le context ?
• Le contexte de binding est un objet qui fait référence au jeu de données
sur lequel vous agissez
• KnockoutJS gère pour vous la hiérarchie de contexte
Ex. : Dans une boucle de type « foreach », chaque itération aura son context
courant
• Plusieurs notions existent pour gérer le context dans knockoutJS :
Récupération du context parent
Récupération du context principal

La notion de parent
• Comme son nom l’indique, il permet de récupérer le contexte du dessus
• Mot-clé « $parent », option : $parents[n], si vous voulez récupérer le
parent du parent … ☺
• Démo ☺

La notion de root
• Permet de récupérer le contexte principale, en conséquent l’ensemble
de votre « VieuxModel »
• Mot clé « $root »
• Démo ☺

La notion de data
• Data permet de récupérer l’objet de votre ViewModel en cours
d’utilisation
• Mot clé : $data
• Dans le cas d’un élément se trouvant à la racine, « $data » est
équivalent à « $root »
• Démo ☺

La notion d’index
• Permet de récupérer la ligne d’un tableau en cours
• Valable pour le « select » et le « foreach »
• Mot clé : $index
• Démo ☺

• Révision sur la notion de context

Les composants
KnockoutJS avancé
Djamel BOUCHOUCHA
Les composants

Plan
• Qu’est ce qu’un composant ?
• Créer un composant

Qu’est ce qu’un composant ?
• Un composant permet de regrouper un ensemble de contrôles en une
fonctionnalité
• Ex. : dès lors que le bouton « j’aime » de facebook a été cliqué, le
contrôle change d’état
• Il peut recevoir des paramètres (avoir son propre ViewModel)
• Il peut être packagé et réutilisé
• Il a un template

Créer un composant
• Deux parties :
ViewModel, représente la partie données de votre composant
Template, représente la partie HTML de votre composant
• Démo
ko.components.register('note-widget', {
viewModel: function(params) {
this.valeurSelectionner = params.value; this.vousAimez = function(vote) { this.valeurSelectionner(vote); };
},
template: '<div data-bind="visible: !valeurSelectionner()"> <img src="https://cdn4.iconfinder.com/data/icons/small-n-
flat/24/star-16.png" data-bind="click: function() { vousAimez(1); }" /> <img
src="https://cdn4.iconfinder.com/data/icons/small-n-flat/24/star-16.png" data-bind="click: function() { vousAimez(2); }"
/> <img src="https://cdn4.iconfinder.com/data/icons/small-n-flat/24/star-16.png" data-bind="click: function() {
vousAimez(3); }" /> </div> <div class="result" data-bind="visible: valeurSelectionner"> Votre vote : <strong data-
bind="text: valeurSelectionner"></strong> </div>' });

• La création d’un composant

Créer
KnockoutJS avancé
Djamel BOUCHOUCHA
Créer
un custom binding

Plan
• Qu’est ce qu’un custom Binding ?
• Démo

Qu’est ce qu’un custom binding
• Certains éléments plus complexes, comme des éditeurs de textes riches,
des sliders, datepicker etc… ne peuvent pas être bindés à l’aide des
éléments classiques comme click ou value
• Ajouter votre custom binding
« ko.bindingHandlers.leNomDeVotreElement »
• Deux méthodes, « init » et « update »
• Deux méthodes, « init » et « update »

Démo
• On va faire simple, on va faire un custom binding ensemble !

• Le binding d’éléments complexes

Développement
Le projet
Djamel BOUCHOUCHA
Développement
du projet

Plan
• Créer le projet
• Sauvegarder le ViewModel en « json »
• Charger le ViewModel depuis du « json »

Création du projet
• Front-end
• Création du squelette de notre application (HTML, CSS et JS)
• Création du ViewModel
• Lien entre le ViewModel et la vue
• Utilisation de la Web Api

Sauvegarder le ViewModel en « json »
• Permet de récupérer votre ViewModel en « json »
• Pour cela rien de plus simple
<pre data-bind="text: ko.toJSON($root, null, 2)"></pre>
• On peut envoyer le « json » générer par knockoutJS au serveur pour le
persister

Charger le ViewModel depuis du « json »
• Permet de récupérer un ViewModel dans un état préalablement
sauvegardé
• Pour cela rien de plus simple :
Récupération du « json » depuis un serveur
Parse de la data récupéré à l’aide de JSON.parse(data)
Parse de la data récupéré à l’aide de JSON.parse(data)
Utilisation du modèle récupéré

• Nous avons terminé notre programme
• Nous appris à sauvegarder notre ViewModel et le restituer

Bilan
KnockoutJS
Djamel BOUCHOUCHA
Bilan

Notre formation
• Nous savons désormais :
Ce qu’est knockoutJS
Lier les vues à aux modèles de données
Séparer les différentes couches qui compose une application web
Mettre à jour l’interface utilisateur en fonction de la mise à jour du modèle
Mettre à jour l’interface utilisateur en fonction de la mise à jour du modèle
• Une introduction à d’autres technologies :
NodeJS
ExpressJS
Bower

See you soon !

Alphorm.com Formation knockoutJS

Recomendados

Recomendados

Mais conteúdo relacionado

Mais procurados

Mais procurados (20)

Destaque

Destaque (20)

Semelhante a Alphorm.com Formation knockoutJS

Semelhante a Alphorm.com Formation knockoutJS (20)

Mais de Alphorm

Mais de Alphorm (20)

Alphorm.com Formation knockoutJS