Présentation
de la formation
KnockoutJS
Formation KnockoutJS alphorm.com™©
Djamel BOUCHOUCHA
Formateur et Consultant .NET
...
Plan
• Présentation de votre formateur
• Qu’est ce que c’est KnockoutJS?
• Présentation de votre formation
• Le plan de la...
Votre formateur
• Djamel BOUCHOUCHA
• Consultant .NET et formateur
• contact@donext.fr
• Compétences :
Web : ASP.NET, PHP,...
Mes formations sur Alphorm
Formation KnockoutJS alphorm.com™©
Qu’est ce que c’est KnockoutJS?
• Un framework permettant de créer des application riches, responsive
et des vues dynamiqu...
Présentation de votre formation
• Apprentissage de knockoutJS
• Création d’un projet Web Complet
• Découverte de nodejs, b...
Le plan de la formation
• Installation des prérequis
• Présentation de Knockout
• Les bases de knockout
• Knockout avancé
...
Publics concernés
• Développeur web
• Développeur WPF avec des connaissances en MVVM
• Curieux, ayant des notions de JavaS...
Prérequis de la formation
• Connaissance de base du développement web :
HTML
CSS
JavaScript
• Aucun autre langage n’est né...
D’autres formations en programmation sur Alphorm
Formation KnockoutJS alphorm.com™©
Are you ready ? ☺
Formation KnockoutJS alphorm.com™©
Présentation
Le projet
Formation KnockoutJS alphorm.com™©
Djamel BOUCHOUCHA
Formateur et Consultant .NET
Contact : contact...
Plan
• Gestion des contacts
• Le back-end à l’aide de nodeJS, expressJS
• Le front à l’aide de bower, jquery, bootstrap et...
Gestion des contacts
• Création/Modification de contacts
Un objet contact est composé des éléments suivants : id, nom, pré...
Back-end
• NodeJS, pour la partie serveur
• ExpressJS, pour l’exposition de la couche service au travers de nodeJS
• Aucun...
Front-end
• Bower gestionnaire de package
• Jquery (une dépendance de knockout.js), framework JS
• Bootstrap (pour la part...
Ce que l’on a couvert
• Notre projet du back-end au front-end
• Les différentes technologies que nous allons utiliser
• Ja...
NodeJS
Le projet
Formation KnockoutJS alphorm.com™©
Djamel BOUCHOUCHA
Formateur et Consultant .NET
Contact : contact@donex...
Plan
• Présentation de NodeJS
• Découverte de npm
• Installation de NodeJS
Formation KnockoutJS alphorm.com™©
Présentation
• JavaScript côté serveur (puissance et souplesse du JS côté serveur)
• Moteur d’exécution JavaScript de Chro...
Découverte de npm
• Gestionnaire de package
• Permet de partager et récupérer les contributions de la communauté
• NPM : N...
Installation
• Aller sur https://nodejs.org/ (installation valable pour Windows/Linux et
Mac OS)
• Démo : Installation sur...
Ce que l’on a couvert
• NodeJS et ses avantages
• Nous avons connaissance de npm
• Nous avons installé nodeJS sur Windows ...
Bower
Le projet
Formation KnockoutJS alphorm.com™©
Djamel BOUCHOUCHA
Formateur et Consultant .NET
Contact : contact@donext...
Plan
• Présentation de Bower
• Installation de Bower
• Utilisation de Bower
Formation KnockoutJS alphorm.com™©
Présentation
• Qu’est ce qu’une dépendance ?
• Gestion de dépendance ?
• Quelles dépendances ?
Formation KnockoutJS alphor...
Installation
• Installation à l’aide de npm
•npm install –g bower
• Démo : sur windows et linux
Formation KnockoutJS alpho...
Utilisation
• Magique : bower install « something »
• Liste des packages disponibles : http://bower.io/search
Formation Kn...
Ce que l’on a couvert
• L’installation et l’utilisation de bower
Formation KnockoutJS alphorm.com™©
ExpressJS
Le projet
Formation KnockoutJS alphorm.com™©
Djamel BOUCHOUCHA
Formateur et Consultant .NET
Contact : contact@do...
Plan
• Présentation
• Installation
• Démo
Formation KnockoutJS alphorm.com™©
Présentation
• Comment gérer les routes sous nodeJS ?
Utilisation de if pour chaque requête ? If(page == ‘’/’’) dosomethin...
Installation
• Grâce à npm
• La commande : npm install express --save
• Démo : sur Linux et Windows
Formation KnockoutJS a...
Démo
// url localhost:8888/Hello en utilisant un GET
app.get('/Hello', function (req, res) { res.send(‘Bienvenue chez Alph...
Ce que l’on a couvert
• L’installation et l’utilisation d’ExpressJS
Formation KnockoutJS alphorm.com™©
Le Backoffice
Le projet
Formation KnockoutJS alphorm.com™©
Djamel BOUCHOUCHA
Formateur et Consultant .NET
Contact : contac...
Plan
• Création du projet
• Création des différentes routes
• Préparation de la partie front-end
• Démo
Formation Knockout...
Création du projet
• Installation de nodeJS
• Installation de bower
• Création du projet
• Installation d’ExpressJS
Format...
Création des différentes routes
• Configuration d’ExpressJS
• Les routes pour la gestion des contacts
• Les routes pour la...
Préparation de la partie front-end
• Configuration d’ExpressJS pour exposer les parties statiques du front-
end (images, c...
Démo
• Test des différents chemins de notre API et des pages du front-end
• Avec quoi ? Le navigateur ? Postman sous chrom...
Ce que l’on a couvert
• Nous avons réalisé notre back-end, ce dernier sera enrichi au fur et à
mesure que nous avancerons ...
Introduction
Présentation
de knockoutJS
Formation KnockoutJS alphorm.com™©
Djamel BOUCHOUCHA
Formateur et Consultant .NET
...
Plan
• Application classique de gestion des contacts
• Utilisation d’un framework de binding
Formation KnockoutJS alphorm....
Application classique de gestion des contacts
• Utilisation d’API
• Utilisation de JQuery pour remplacer les éléments dans...
Utilisation d’un framework de binding ?
• Qu’est ce que le binding ?
• Les avantages ?
Se concentrer uniquement sur les do...
Ce que l’on a couvert
• On peut faire de différentes façons notre application, mais ici nous
allons le faire bien, nous al...
Qu’est ce que
Présentation
de knockoutJS
Formation KnockoutJS alphorm.com™©
Djamel BOUCHOUCHA
Formateur et Consultant .NET...
Plan
• Présentation
• Démo
Formation KnockoutJS alphorm.com™©
Présentation
• Créer un lien entre les données et la vue (le binding)
• Pourquoi ?
• Comment ?
• MVVM
Formation KnockoutJS...
Démo
• Une démo de l’utilisation de knockoutJS
Formation KnockoutJS alphorm.com™©
Ce que l’on a couvert
• On est entré dans le vif du sujet ☺ en découvrant knockoutJS !
• On a vu en quoi et comment utilis...
Pattern MVVM
Présentation
de knockoutJS
Formation KnockoutJS alphorm.com™©
Djamel BOUCHOUCHA
Formateur et Consultant .NET
...
Plan
• Présentation
• MVVM et knockoutJS
Formation KnockoutJS alphorm.com™©
Présentation
ViewModel
Formation KnockoutJS alphorm.com™©
ModelView
MVVM et knockoutJS
• View : les différents éléments HTML, CSS et JavaScript
• ViewModel : knockoutJS, partie permettant de...
Ce que l’on a couvert
• Découvrir le pattern MVVM et savoir l’utiliser
Formation KnockoutJS alphorm.com™©
Prérequis
Présentation
de knockoutJS
Formation KnockoutJS alphorm.com™©
Djamel BOUCHOUCHA
Formateur et Consultant .NET
Con...
Plan
• Un peu de JavaScript
• HTML, CSS
Formation KnockoutJS alphorm.com™©
Un peu de javascript
• Les variables
• Les fonctions
• Les conditions
• Les boucles
Formation KnockoutJS alphorm.com™©
• L...
HTML et CSS
• Les bases du HTML
• Les bases du CSS
• Bootstrap
Formation KnockoutJS alphorm.com™©
Ce que l’on a couvert
• Des rappels sur les bases du JavaScript, HTML et CSS
Formation KnockoutJS alphorm.com™©
Le ViewModel
Les bases de knockoutJS
Formation KnockoutJS alphorm.com™©
Djamel BOUCHOUCHA
Formateur et Consultant .NET
Con...
Plan
• L’importance du ViewModel
• Création du projet
• Application du ViewModel (binding)
Formation KnockoutJS alphorm.co...
L’importance du ViewModel
• Le ViewModel expose des propriétés à la vue
• Le ViewModel transforme les données récupérées d...
Création du projet
• Création du fichier « index.html » et import des librairies nécessaires
• Création du fichier « conta...
Application du ViewModel (binding)
• Définition du ViewModel
• Association du ViewModel à knockoutJS
• Option : possibilit...
Ce que l’on a couvert
• Le View Model
• La création du projet
Formation KnockoutJS alphorm.com™©
Les trois fonctions
Les bases de knockoutJS
Formation KnockoutJS alphorm.com™©
Djamel BOUCHOUCHA
Formateur et Consultant ....
Plan
• Observable
• ObservableArray
• Computed
Formation KnockoutJS alphorm.com™©
Observable
• Une propriété observée par knockoutJS, permet de notifier tous les
éléments « associés » en cas de changement...
ObservableArray
• Même principe que pour observable, à la différence, comme son nom
l’indique, qu’elle permet de créer une...
Computed
• Un minimum de logique dans la vue !
• Permet d’utiliser les différents observables pour exposer une nouvelle
pr...
Ce qu’on a couvert
• Les trois fonctions de base !
• Une grande partie de vos besoins est couverte par ces trois fonctions...
Contrôle du texte
Les bases de knockoutJS
Formation KnockoutJS alphorm.com™©
Djamel BOUCHOUCHA
Formateur et Consultant .NE...
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 s...
Le contrôle de la visibilité
• L’utilisation du paramètre « visible »
• Un « false », « 0 », « null » ou « undefined » ent...
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 ...
Le contrôle du rendu HTML
• L’utilisation du paramètre « html »
• Différence avec le paramètre « text » ?
• C’est l’équiva...
Le contrôle du style (CSS)
• L’utilisation des paramètres « css » et « style »
• Le paramètre « css » lie votre objet aux ...
Ce que l’on a couvert
• Les différentes façons de contrôler l’apparence de notre page
• Aussi bien le style que la générat...
Contrôle du flux
Les bases de knockoutJS
Formation KnockoutJS alphorm.com™©
Djamel BOUCHOUCHA
Formateur et Consultant .NET...
Plan
• La boucle « foreach »
• Les conditions « if, else, if else, if not »
• Le binding « with »
Formation KnockoutJS alp...
La boucle « foreach »
<table>
<thead>
<tr><th>Prénom</th>
<th>Nom</th></tr>
</thead>
<tbody data-bind="foreach: people">
<...
Les conditions « if, else, if else, if not »
• Plus simple, on met un if en place
• On peut obtenir le « else » avec la sy...
Le binding « with »
• Context de binding ! Ne descend pas si l’élément est nul
• Accès au parent avec le mot clé « $parent...
Ce que l’on a couvert
• La gestion du flux avec knockoutJS
• On peut maintenant contrôler notre affichage et nos actions e...
Binding avec
Les bases de knockoutJS
Formation KnockoutJS alphorm.com™©
Djamel BOUCHOUCHA
Formateur et Consultant .NET
Con...
Plan
• L’évènement clique
• Les autres évènements
• La soumission
• L’état (activé/désactivé)
Formation KnockoutJS alphorm...
Les évènements
• Possibilité de lier l’évènement clique à une action de votre ViewModel
• Le binding « click »
• Deux para...
Les autres évènements
• Possibilité de lier un évènement à une fonction de votre ViewModel
• Récupération du contexte de l...
La soumission
• Permet de contrôler la soumission de votre formulaire
• Renvoyer « true » si vous souhaitez continuer l’ac...
L’état (activé/désactivé)
• Permet de gérer l’état d’un contrôle
• Mot-clé « enable »
<p> Votre adresse : <input type='tex...
Liaison avec la saisie utilisateur
• Permet de récupérer la saisie utilisateur dans un « input », « textbox » et
le choix ...
Le focus d’un contrôle
• Permet de donner le focus à un contrôle en le liant à votre ViewModel
• Mot-clé « hasFocus »
<inp...
Checkbox et radio buttons
• Permet de lier les choix utilisateurs à votre ViewModel
• Pour les « checkbox » c’est assez si...
Les listes déroulantes
• Permet de binder un tableau à un élément de type « listbox »
• Plusieurs mots-clés :
Options, lis...
Ce que l’on a couvert
• Les différentes façons de se lier aux éléments du DOM
Formation KnockoutJS alphorm.com™©
Le context de binding
KnockoutJS avancé
Formation KnockoutJS alphorm.com™©
Djamel BOUCHOUCHA
Formateur et Consultant .NET
...
Plan
• Qu’est ce que le context ?
• La notion de parent
• La notion de root
• La notion de data
Formation KnockoutJS alpho...
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
...
La notion de parent
• Comme son nom l’indique, il permet de récupérer le contexte du dessus
• Mot-clé « $parent », option ...
La notion de root
• Permet de récupérer le contexte principale, en conséquent l’ensemble
de votre « VieuxModel »
• Mot clé...
La notion de data
• Data permet de récupérer l’objet de votre ViewModel en cours
d’utilisation
• Mot clé : $data
• Dans le...
La notion d’index
• Permet de récupérer la ligne d’un tableau en cours
• Valable pour le « select » et le « foreach »
• Mo...
Ce que l’on a couvert
• Révision sur la notion de context
Formation KnockoutJS alphorm.com™©
Les composants
KnockoutJS avancé
Formation KnockoutJS alphorm.com™©
Djamel BOUCHOUCHA
Formateur et Consultant .NET
Contact...
Plan
• Qu’est ce qu’un composant ?
• Créer un composant
Formation KnockoutJS alphorm.com™©
Qu’est ce qu’un composant ?
• Un composant permet de regrouper un ensemble de contrôles en une
fonctionnalité
• Ex. : dès ...
Créer un composant
• Deux parties :
ViewModel, représente la partie données de votre composant
Template, représente la par...
Ce que l’on a couvert
• La création d’un composant
Formation KnockoutJS alphorm.com™©
Créer
KnockoutJS avancé
Formation KnockoutJS alphorm.com™©
Djamel BOUCHOUCHA
Formateur et Consultant .NET
Contact : contac...
Plan
• Qu’est ce qu’un custom Binding ?
• Démo
Formation KnockoutJS alphorm.com™©
Qu’est ce qu’un custom binding
• Certains éléments plus complexes, comme des éditeurs de textes riches,
des sliders, datep...
Démo
• On va faire simple, on va faire un custom binding ensemble !
Formation KnockoutJS alphorm.com™©
Ce que l’on a couvert
• Le binding d’éléments complexes
Formation KnockoutJS alphorm.com™©
Développement
Le projet
Formation KnockoutJS alphorm.com™©
Djamel BOUCHOUCHA
Formateur et Consultant .NET
Contact : contac...
Plan
• Créer le projet
• Sauvegarder le ViewModel en « json »
• Charger le ViewModel depuis du « json »
Formation Knockout...
Création du projet
• Front-end
• Création du squelette de notre application (HTML, CSS et JS)
• Création du ViewModel
• Li...
Sauvegarder le ViewModel en « json »
• Permet de récupérer votre ViewModel en « json »
• Pour cela rien de plus simple
<pr...
Charger le ViewModel depuis du « json »
• Permet de récupérer un ViewModel dans un état préalablement
sauvegardé
• Pour ce...
Ce que l’on a couvert
• Nous avons terminé notre programme
• Nous appris à sauvegarder notre ViewModel et le restituer
For...
Bilan
KnockoutJS
Formation KnockoutJS alphorm.com™©
Djamel BOUCHOUCHA
Formateur et Consultant .NET
Contact : contact@donex...
Notre formation
• Nous savons désormais :
Ce qu’est knockoutJS
Lier les vues à aux modèles de données
Séparer les différen...
See you soon !
Formation KnockoutJS alphorm.com™©
Prochain SlideShare
Chargement dans…5
×

Alphorm.com Formation knockoutJS

3 522 vues

Publié le

Formation complète ici:
http://www.alphorm.com/tutoriel/formation-en-ligne-knockoutjs

Knockout est une implémentation autonome de JavaScript du modèle MVVM avec des modèles.
Sa puissance est de rationaliser et de simplifier la spécification des relations complexes entre les composants View, ce qui rend l'affichage plus responsive et l'expérience utilisateur plus riche.

La formation aborde ensuite les bases de KnockoutJS pour peu à peu se concentrer sur les concepts les plus avancés et intéressants de KnockoutJS : Pattern MVVM, Le ViewModel, le Contrôle du texte et de l'apparence, le Contrôle du flux de l'application, le Binding avec les évènements du DOM, Le context de binding, Les composants, et comment créer un custom binding.

La formation introduit aussi plusieurs technologies communément utilisées sur le web, comme NodeJs, Express ou encore Bower.

Comme toutes les formations Alphorm, cette formation Knockout est articulée autour d’un projet, dont les sources sont téléchargeables dans votre espace utilisateur. Ce projet vous permettra de découvrir par la même occasion des technologies comme bootstrap pour la partie front.

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

Aucun téléchargement
Vues
Nombre de vues
3 522
Sur SlideShare
0
Issues des intégrations
0
Intégrations
2 373
Actions
Partages
0
Téléchargements
78
Commentaires
0
J’aime
1
Intégrations 0
Aucune incorporation

Aucune remarque pour cette diapositive

Alphorm.com Formation knockoutJS

  1. 1. 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
  2. 2. Plan • Présentation de votre formateur • Qu’est ce que c’est KnockoutJS? • Présentation de votre formation • Le plan de la formation Formation KnockoutJS alphorm.com™© • Publics concernés • Prérequis de la formation
  3. 3. 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, Formation KnockoutJS alphorm.com™© 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
  4. 4. Mes formations sur Alphorm Formation KnockoutJS alphorm.com™©
  5. 5. 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) Formation KnockoutJS alphorm.com™© 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 !
  6. 6. Présentation de votre formation • Apprentissage de knockoutJS • Création d’un projet Web Complet • Découverte de nodejs, bower et express Formation KnockoutJS alphorm.com™©
  7. 7. Le plan de la formation • Installation des prérequis • Présentation de Knockout • Les bases de knockout • Knockout avancé Formation KnockoutJS alphorm.com™© • Finalisation du projet
  8. 8. 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 ☺ Formation KnockoutJS alphorm.com™©
  9. 9. Prérequis de la formation • Connaissance de base du développement web : HTML CSS JavaScript • Aucun autre langage n’est nécessaire Formation KnockoutJS alphorm.com™© • Aucun autre langage n’est nécessaire
  10. 10. D’autres formations en programmation sur Alphorm Formation KnockoutJS alphorm.com™©
  11. 11. Are you ready ? ☺ Formation KnockoutJS alphorm.com™©
  12. 12. Présentation Le projet Formation KnockoutJS alphorm.com™© Djamel BOUCHOUCHA Formateur et Consultant .NET Contact : contact@donext.fr Présentation du projet Site : http://www.alphorm.com Blog : http://blog.alphorm.com Forum : http://forum.alphorm.com
  13. 13. Plan • Gestion des contacts • Le back-end à l’aide de nodeJS, expressJS • Le front à l’aide de bower, jquery, bootstrap et knockoutJS Formation KnockoutJS alphorm.com™©
  14. 14. 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 Formation KnockoutJS alphorm.com™© 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
  15. 15. 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 Formation KnockoutJS alphorm.com™©
  16. 16. 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 Formation KnockoutJS alphorm.com™©
  17. 17. 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 ! Formation KnockoutJS alphorm.com™©
  18. 18. NodeJS Le projet Formation KnockoutJS alphorm.com™© Djamel BOUCHOUCHA Formateur et Consultant .NET Contact : contact@donext.fr NodeJS Site : http://www.alphorm.com Blog : http://blog.alphorm.com Forum : http://forum.alphorm.com
  19. 19. Plan • Présentation de NodeJS • Découverte de npm • Installation de NodeJS Formation KnockoutJS alphorm.com™©
  20. 20. 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) Formation KnockoutJS alphorm.com™© • Modulable et évolutive • Forte communauté ! • Pour en savoir plus en attendant la formation Alphorm : http://nodeschool.io/
  21. 21. 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 Formation KnockoutJS alphorm.com™© • NodeJS pour lancer notre programme et npm pour télécharger nos packages, comme express par exemple
  22. 22. Installation • Aller sur https://nodejs.org/ (installation valable pour Windows/Linux et Mac OS) • Démo : Installation sur Windows et Linux Formation KnockoutJS alphorm.com™©
  23. 23. Ce que l’on a couvert • NodeJS et ses avantages • Nous avons connaissance de npm • Nous avons installé nodeJS sur Windows et Linux ! Formation KnockoutJS alphorm.com™©
  24. 24. Bower Le projet Formation KnockoutJS alphorm.com™© Djamel BOUCHOUCHA Formateur et Consultant .NET Contact : contact@donext.fr Bower Site : http://www.alphorm.com Blog : http://blog.alphorm.com Forum : http://forum.alphorm.com
  25. 25. Plan • Présentation de Bower • Installation de Bower • Utilisation de Bower Formation KnockoutJS alphorm.com™©
  26. 26. Présentation • Qu’est ce qu’une dépendance ? • Gestion de dépendance ? • Quelles dépendances ? Formation KnockoutJS alphorm.com™©
  27. 27. Installation • Installation à l’aide de npm •npm install –g bower • Démo : sur windows et linux Formation KnockoutJS alphorm.com™©
  28. 28. Utilisation • Magique : bower install « something » • Liste des packages disponibles : http://bower.io/search Formation KnockoutJS alphorm.com™©
  29. 29. Ce que l’on a couvert • L’installation et l’utilisation de bower Formation KnockoutJS alphorm.com™©
  30. 30. ExpressJS Le projet Formation KnockoutJS alphorm.com™© Djamel BOUCHOUCHA Formateur et Consultant .NET Contact : contact@donext.fr ExpressJS Site : http://www.alphorm.com Blog : http://blog.alphorm.com Forum : http://forum.alphorm.com
  31. 31. Plan • Présentation • Installation • Démo Formation KnockoutJS alphorm.com™©
  32. 32. 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 Formation KnockoutJS alphorm.com™©
  33. 33. Installation • Grâce à npm • La commande : npm install express --save • Démo : sur Linux et Windows Formation KnockoutJS alphorm.com™©
  34. 34. 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 !'); }); Formation KnockoutJS alphorm.com™© // url localhost:8888/Hello en utilisant un POST app.put('/Hello', function (req, res) { res.send(‘Votre mise à jour a bien été prise en compte, merci !'); }); // url localhost:8888/Hello en utilisant un POST app.delete('/Hello', function (req, res) { res.send(‘Votre suppression a bien été prise en compte, merci !'); });
  35. 35. Ce que l’on a couvert • L’installation et l’utilisation d’ExpressJS Formation KnockoutJS alphorm.com™©
  36. 36. Le Backoffice Le projet Formation KnockoutJS alphorm.com™© Djamel BOUCHOUCHA Formateur et Consultant .NET Contact : contact@donext.fr Le Backoffice Site : http://www.alphorm.com Blog : http://blog.alphorm.com Forum : http://forum.alphorm.com
  37. 37. Plan • Création du projet • Création des différentes routes • Préparation de la partie front-end • Démo Formation KnockoutJS alphorm.com™©
  38. 38. Création du projet • Installation de nodeJS • Installation de bower • Création du projet • Installation d’ExpressJS Formation KnockoutJS alphorm.com™©
  39. 39. 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 Formation KnockoutJS alphorm.com™©
  40. 40. 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 Formation KnockoutJS alphorm.com™©
  41. 41. Démo • Test des différents chemins de notre API et des pages du front-end • Avec quoi ? Le navigateur ? Postman sous chrome Formation KnockoutJS alphorm.com™©
  42. 42. Ce que l’on a couvert • Nous avons réalisé notre back-end, ce dernier sera enrichi au fur et à mesure que nous avancerons dans notre formation Formation KnockoutJS alphorm.com™©
  43. 43. Introduction Présentation de knockoutJS Formation KnockoutJS alphorm.com™© Djamel BOUCHOUCHA Formateur et Consultant .NET Contact : contact@donext.fr Introduction Site : http://www.alphorm.com Blog : http://blog.alphorm.com Forum : http://forum.alphorm.com
  44. 44. Plan • Application classique de gestion des contacts • Utilisation d’un framework de binding Formation KnockoutJS alphorm.com™©
  45. 45. 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…) Formation KnockoutJS alphorm.com™© etc…) • On peut également utiliser un moteur de template (EJS, Jade, Mustache …)
  46. 46. 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é Formation KnockoutJS alphorm.com™© Réutilisation du code simplifié • Démo de binding avec AngularJS et knockoutJS
  47. 47. Ce que l’on a couvert • 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 ! Formation KnockoutJS alphorm.com™©
  48. 48. Qu’est ce que Présentation de knockoutJS Formation KnockoutJS alphorm.com™© Djamel BOUCHOUCHA Formateur et Consultant .NET Contact : contact@donext.fr Qu’est ce que knockoutJS ? Site : http://www.alphorm.com Blog : http://blog.alphorm.com Forum : http://forum.alphorm.com
  49. 49. Plan • Présentation • Démo Formation KnockoutJS alphorm.com™©
  50. 50. Présentation • Créer un lien entre les données et la vue (le binding) • Pourquoi ? • Comment ? • MVVM Formation KnockoutJS alphorm.com™©
  51. 51. Démo • Une démo de l’utilisation de knockoutJS Formation KnockoutJS alphorm.com™©
  52. 52. Ce que l’on a couvert • On est entré dans le vif du sujet ☺ en découvrant knockoutJS ! • On a vu en quoi et comment utiliser knockoutJS Formation KnockoutJS alphorm.com™©
  53. 53. Pattern MVVM Présentation de knockoutJS Formation KnockoutJS alphorm.com™© Djamel BOUCHOUCHA Formateur et Consultant .NET Contact : contact@donext.fr Pattern MVVM Site : http://www.alphorm.com Blog : http://blog.alphorm.com Forum : http://forum.alphorm.com
  54. 54. Plan • Présentation • MVVM et knockoutJS Formation KnockoutJS alphorm.com™©
  55. 55. Présentation ViewModel Formation KnockoutJS alphorm.com™© ModelView
  56. 56. 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 Formation KnockoutJS alphorm.com™©
  57. 57. Ce que l’on a couvert • Découvrir le pattern MVVM et savoir l’utiliser Formation KnockoutJS alphorm.com™©
  58. 58. Prérequis Présentation de knockoutJS Formation KnockoutJS alphorm.com™© Djamel BOUCHOUCHA Formateur et Consultant .NET Contact : contact@donext.fr Prérequis Site : http://www.alphorm.com Blog : http://blog.alphorm.com Forum : http://forum.alphorm.com
  59. 59. Plan • Un peu de JavaScript • HTML, CSS Formation KnockoutJS alphorm.com™©
  60. 60. Un peu de javascript • Les variables • Les fonctions • Les conditions • Les boucles Formation KnockoutJS alphorm.com™© • Les tableaux • Le scope • Les types
  61. 61. HTML et CSS • Les bases du HTML • Les bases du CSS • Bootstrap Formation KnockoutJS alphorm.com™©
  62. 62. Ce que l’on a couvert • Des rappels sur les bases du JavaScript, HTML et CSS Formation KnockoutJS alphorm.com™©
  63. 63. Le ViewModel Les bases de knockoutJS Formation KnockoutJS alphorm.com™© Djamel BOUCHOUCHA Formateur et Consultant .NET Contact : contact@donext.fr Le ViewModel Site : http://www.alphorm.com Blog : http://blog.alphorm.com Forum : http://forum.alphorm.com
  64. 64. Plan • L’importance du ViewModel • Création du projet • Application du ViewModel (binding) Formation KnockoutJS alphorm.com™©
  65. 65. 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é Formation KnockoutJS alphorm.com™© • Le ViewModel peut être réutilisé
  66. 66. 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 » Formation KnockoutJS alphorm.com™© • Association de « contact.js » à « index.html »
  67. 67. 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. Formation KnockoutJS alphorm.com™© var monViewModel = { Nom: ‘James', Age: 28 }; ko.applyBindings(monViewModel);
  68. 68. Ce que l’on a couvert • Le View Model • La création du projet Formation KnockoutJS alphorm.com™©
  69. 69. Les trois fonctions Les bases de knockoutJS Formation KnockoutJS alphorm.com™© Djamel BOUCHOUCHA Formateur et Consultant .NET Contact : contact@donext.fr Les trois fonctions de base Site : http://www.alphorm.com Blog : http://blog.alphorm.com Forum : http://forum.alphorm.com
  70. 70. Plan • Observable • ObservableArray • Computed Formation KnockoutJS alphorm.com™©
  71. 71. 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 ? Formation KnockoutJS alphorm.com™© Nom("Nouveau") var monViewModel = { Nom: ko.observable(‘James‘), Age: 28 }; ko.applyBindings(monViewModel);
  72. 72. 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 …) Formation KnockoutJS alphorm.com™© var monViewModel = { var departements = ko.observableArray() departements.push("Paris"); }; ko.applyBindings(monViewModel);
  73. 73. 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 Formation KnockoutJS alphorm.com™© concaténation du nom et du prénom this.nomComplet = ko.computed(function() { return this.prenom() + " " + this.nom(); });
  74. 74. 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 Formation KnockoutJS alphorm.com™©
  75. 75. Contrôle du texte Les bases de knockoutJS Formation KnockoutJS alphorm.com™© Djamel BOUCHOUCHA Formateur et Consultant .NET Contact : contact@donext.fr Contrôle du texte et de l’apparence Site : http://www.alphorm.com Blog : http://blog.alphorm.com Forum : http://forum.alphorm.com
  76. 76. 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) Formation KnockoutJS alphorm.com™©
  77. 77. 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 » à Formation KnockoutJS alphorm.com™© • L’utilisation de visible est comparable à l’utilisation du style « display » à none
  78. 78. 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 (*) Formation KnockoutJS alphorm.com™© • Attention avec le select/option !
  79. 79. 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) Formation KnockoutJS alphorm.com™©
  80. 80. 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 Formation KnockoutJS alphorm.com™© • Attention pour le style, il faut écrire « fontWeight » et non « font- weight ». Faire sauter les « - »
  81. 81. Ce que l’on a couvert • Les différentes façons de contrôler l’apparence de notre page • Aussi bien le style que la génération de contenu Formation KnockoutJS alphorm.com™©
  82. 82. Contrôle du flux Les bases de knockoutJS Formation KnockoutJS alphorm.com™© Djamel BOUCHOUCHA Formateur et Consultant .NET Contact : contact@donext.fr Contrôle du flux de l’application Site : http://www.alphorm.com Blog : http://blog.alphorm.com Forum : http://forum.alphorm.com
  83. 83. Plan • La boucle « foreach » • Les conditions « if, else, if else, if not » • Le binding « with » Formation KnockoutJS alphorm.com™©
  84. 84. 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> Formation KnockoutJS alphorm.com™© </tbody> </table> <script type="text/javascript"> ko.applyBindings({ contact: [ { prenom: 'Daniel', nom: 'Bazz' }, { prenom : 'Eric', nom: 'Caen' }, { prenom : 'Djamel', nom: 'BOUCHOUCHA' } ] }); </script>
  85. 85. 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 ! Formation KnockoutJS alphorm.com™© • Démo !
  86. 86. 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 Formation KnockoutJS alphorm.com™©
  87. 87. Ce que l’on a couvert • La gestion du flux avec knockoutJS • On peut maintenant contrôler notre affichage et nos actions en fonction de nos conditions ! Formation KnockoutJS alphorm.com™©
  88. 88. Binding avec Les bases de knockoutJS Formation KnockoutJS alphorm.com™© Djamel BOUCHOUCHA Formateur et Consultant .NET Contact : contact@donext.fr Binding avec les éléments du DOM Site : http://www.alphorm.com Blog : http://blog.alphorm.com Forum : http://forum.alphorm.com
  89. 89. Plan • L’évènement clique • Les autres évènements • La soumission • L’état (activé/désactivé) Formation KnockoutJS alphorm.com™© • Liaison avec la saisie utilisateur • Le focus d’un contrôle • Checkbox et radio buttons • Les listes déroulantes
  90. 90. 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> Formation KnockoutJS alphorm.com™© • 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>
  91. 91. 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 : Formation KnockoutJS alphorm.com™© Mouseover Mouseout Keypress <div data-bind="event: { mouseover: enable, mouseout: disable }"> Mouse over :) </div>
  92. 92. 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 » Formation KnockoutJS alphorm.com™© <form data-bind="submit: doSomething"> Vos différents composants <button type="submit">Envoyer</button> </form> <script type="text/javascript"> var viewModel = { doSomething : function(formElement) { } }; </script>
  93. 93. 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> Formation KnockoutJS alphorm.com™© canEditAdresse" /> </p>
  94. 94. 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) Formation KnockoutJS alphorm.com™© • 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>
  95. 95. 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" /> Formation KnockoutJS alphorm.com™©
  96. 96. 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 : Formation KnockoutJS alphorm.com™© <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> <script type="text/javascript"> var viewModel = { alphormNewsletter: ko.observable(true), newsletterType: ko.observable("dev"); }; </script>
  97. 97. 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 Formation KnockoutJS alphorm.com™© 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 ☺
  98. 98. Ce que l’on a couvert • Les différentes façons de se lier aux éléments du DOM Formation KnockoutJS alphorm.com™©
  99. 99. Le context de binding KnockoutJS avancé Formation KnockoutJS alphorm.com™© Djamel BOUCHOUCHA Formateur et Consultant .NET Contact : contact@donext.fr Le context de binding Site : http://www.alphorm.com Blog : http://blog.alphorm.com Forum : http://forum.alphorm.com
  100. 100. Plan • Qu’est ce que le context ? • La notion de parent • La notion de root • La notion de data Formation KnockoutJS alphorm.com™© • La notion d’index
  101. 101. 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 Formation KnockoutJS alphorm.com™© • Plusieurs notions existent pour gérer le context dans knockoutJS : Récupération du context parent Récupération du context principal
  102. 102. 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 ☺ Formation KnockoutJS alphorm.com™©
  103. 103. 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 ☺ Formation KnockoutJS alphorm.com™©
  104. 104. 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 » Formation KnockoutJS alphorm.com™© • Démo ☺
  105. 105. 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 ☺ Formation KnockoutJS alphorm.com™©
  106. 106. Ce que l’on a couvert • Révision sur la notion de context Formation KnockoutJS alphorm.com™©
  107. 107. Les composants KnockoutJS avancé Formation KnockoutJS alphorm.com™© Djamel BOUCHOUCHA Formateur et Consultant .NET Contact : contact@donext.fr Les composants Site : http://www.alphorm.com Blog : http://blog.alphorm.com Forum : http://forum.alphorm.com
  108. 108. Plan • Qu’est ce qu’un composant ? • Créer un composant Formation KnockoutJS alphorm.com™©
  109. 109. 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) Formation KnockoutJS alphorm.com™© • Il peut être packagé et réutilisé • Il a un template
  110. 110. 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 Formation KnockoutJS alphorm.com™© 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>' });
  111. 111. Ce que l’on a couvert • La création d’un composant Formation KnockoutJS alphorm.com™©
  112. 112. Créer KnockoutJS avancé Formation KnockoutJS alphorm.com™© Djamel BOUCHOUCHA Formateur et Consultant .NET Contact : contact@donext.fr Créer un custom binding Site : http://www.alphorm.com Blog : http://blog.alphorm.com Forum : http://forum.alphorm.com
  113. 113. Plan • Qu’est ce qu’un custom Binding ? • Démo Formation KnockoutJS alphorm.com™©
  114. 114. 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 » Formation KnockoutJS alphorm.com™© • Deux méthodes, « init » et « update »
  115. 115. Démo • On va faire simple, on va faire un custom binding ensemble ! Formation KnockoutJS alphorm.com™©
  116. 116. Ce que l’on a couvert • Le binding d’éléments complexes Formation KnockoutJS alphorm.com™©
  117. 117. Développement Le projet Formation KnockoutJS alphorm.com™© Djamel BOUCHOUCHA Formateur et Consultant .NET Contact : contact@donext.fr Développement du projet Site : http://www.alphorm.com Blog : http://blog.alphorm.com Forum : http://forum.alphorm.com
  118. 118. Plan • Créer le projet • Sauvegarder le ViewModel en « json » • Charger le ViewModel depuis du « json » Formation KnockoutJS alphorm.com™©
  119. 119. 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 Formation KnockoutJS alphorm.com™© • Utilisation de la Web Api
  120. 120. 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> Formation KnockoutJS alphorm.com™© • On peut envoyer le « json » générer par knockoutJS au serveur pour le persister
  121. 121. 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) Formation KnockoutJS alphorm.com™© Parse de la data récupéré à l’aide de JSON.parse(data) Utilisation du modèle récupéré
  122. 122. Ce que l’on a couvert • Nous avons terminé notre programme • Nous appris à sauvegarder notre ViewModel et le restituer Formation KnockoutJS alphorm.com™©
  123. 123. Bilan KnockoutJS Formation KnockoutJS alphorm.com™© Djamel BOUCHOUCHA Formateur et Consultant .NET Contact : contact@donext.fr Bilan Site : http://www.alphorm.com Blog : http://blog.alphorm.com Forum : http://forum.alphorm.com
  124. 124. 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 Formation KnockoutJS alphorm.com™© Mettre à jour l’interface utilisateur en fonction de la mise à jour du modèle • Une introduction à d’autres technologies : NodeJS ExpressJS Bower
  125. 125. See you soon ! Formation KnockoutJS alphorm.com™©

×