View
620
Download
7
Category
Preview:
Citation preview
Présentation de la formation
KnockoutJS
Formation KnockoutJS alphorm.com™©
Djamel BOUCHOUCHAFormateur et Consultant .NETContact : contact@donext.fr
KnockoutJS
Site : http://www.alphorm.comBlog : http://blog.alphorm.comForum : 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
Formation KnockoutJS alphorm.com™©
• 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,
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
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 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 !
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™©
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
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™©
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
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 BOUCHOUCHAFormateur et Consultant .NETContact : contact@donext.fr
Présentation du projet
Site : http://www.alphorm.comBlog : http://blog.alphorm.comForum : http://forum.alphorm.com
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™©
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
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™©
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™©
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™©
NodeJS
Le projet
Formation KnockoutJS alphorm.com™©
Djamel BOUCHOUCHAFormateur et Consultant .NETContact : contact@donext.fr
NodeJS
Site : http://www.alphorm.comBlog : http://blog.alphorm.comForum : http://forum.alphorm.com
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 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/
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
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™©
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™©
Bower
Le projet
Formation KnockoutJS alphorm.com™©
Djamel BOUCHOUCHAFormateur et Consultant .NETContact : contact@donext.fr
Bower
Site : http://www.alphorm.comBlog : http://blog.alphorm.comForum : http://forum.alphorm.com
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 alphorm.com™©
Installation
• Installation à l’aide de npm
•npm install –g bower
• Démo : sur windows et linux
Formation KnockoutJS alphorm.com™©
Utilisation
• Magique : bower install « something »
• Liste des packages disponibles : http://bower.io/search
Formation KnockoutJS alphorm.com™©
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 BOUCHOUCHAFormateur et Consultant .NETContact : contact@donext.fr
ExpressJS
Site : http://www.alphorm.comBlog : http://blog.alphorm.comForum : http://forum.alphorm.com
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 == ‘’/’’) dosomething(); else…
� Utiliser un framework pour le faire proprement ? ExpressJS !
• Utilisation des templates
Formation KnockoutJS alphorm.com™©
Installation
• Grâce à npm
• La commande : npm install express --save
• Démo : sur Linux et Windows
Formation KnockoutJS alphorm.com™©
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 !'); });
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 BOUCHOUCHAFormateur et Consultant .NETContact : contact@donext.fr
Le Backoffice
Site : http://www.alphorm.comBlog : http://blog.alphorm.comForum : http://forum.alphorm.com
Plan
• Création du projet
• Création des différentes routes
• Préparation de la partie front-end
• Démo
Formation KnockoutJS alphorm.com™©
Création du projet
• Installation de nodeJS
• Installation de bower
• Création du projet
• Installation d’ExpressJS
Formation KnockoutJS alphorm.com™©
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™©
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™©
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™©
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™©
Introduction
Présentation de knockoutJS
Formation KnockoutJS alphorm.com™©
Djamel BOUCHOUCHAFormateur et Consultant .NETContact : contact@donext.fr
Introduction
Site : http://www.alphorm.comBlog : http://blog.alphorm.comForum : http://forum.alphorm.com
Plan
• Application classique de gestion des contacts
• Utilisation d’un framework de binding
Formation KnockoutJS alphorm.com™©
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…)
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
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™©
Qu’est ce que
Présentation de knockoutJS
Formation KnockoutJS alphorm.com™©
Djamel BOUCHOUCHAFormateur et Consultant .NETContact : contact@donext.fr
Qu’est ce que knockoutJS ?
Site : http://www.alphorm.comBlog : http://blog.alphorm.comForum : http://forum.alphorm.com
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 alphorm.com™©
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 utiliser knockoutJS
Formation KnockoutJS alphorm.com™©
Pattern MVVM
Présentation de knockoutJS
Formation KnockoutJS alphorm.com™©
Djamel BOUCHOUCHAFormateur et Consultant .NETContact : contact@donext.fr
Pattern MVVM
Site : http://www.alphorm.comBlog : http://blog.alphorm.comForum : http://forum.alphorm.com
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 faire le lien entre la vue et le modèle
• Model : back-end
Formation KnockoutJS alphorm.com™©
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 BOUCHOUCHAFormateur et Consultant .NETContact : contact@donext.fr
Prérequis
Site : http://www.alphorm.comBlog : http://blog.alphorm.comForum : http://forum.alphorm.com
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™©
• Les tableaux
• Le scope
• Les types
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 BOUCHOUCHAFormateur et Consultant .NETContact : contact@donext.fr
Le ViewModel
Site : http://www.alphorm.comBlog : http://blog.alphorm.comForum : http://forum.alphorm.com
Plan
• L’importance du ViewModel
• Création du projet
• Application du ViewModel (binding)
Formation KnockoutJS alphorm.com™©
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é
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 »
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);
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 BOUCHOUCHAFormateur et Consultant .NETContact : contact@donext.fr
Les trois fonctions de base
Site : http://www.alphorm.comBlog : http://blog.alphorm.comForum : http://forum.alphorm.com
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.
• 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);
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);
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 computedpourrait 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();
});
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™©
Contrôle du texte
Les bases de knockoutJS
Formation KnockoutJS alphorm.com™©
Djamel BOUCHOUCHAFormateur et Consultant .NETContact : contact@donext.fr
Contrôle du texte et de l’apparence
Site : http://www.alphorm.comBlog : http://blog.alphorm.comForum : http://forum.alphorm.com
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™©
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
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 !
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™©
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 « - »
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™©
Contrôle du flux
Les bases de knockoutJS
Formation KnockoutJS alphorm.com™©
Djamel BOUCHOUCHAFormateur et Consultant .NETContact : contact@donext.fr
Contrôle du flux de l’application
Site : http://www.alphorm.comBlog : http://blog.alphorm.comForum : http://forum.alphorm.com
Plan
• La boucle « foreach »
• Les conditions « if, else, if else, if not »
• Le binding « with »
Formation KnockoutJS alphorm.com™©
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>
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 !
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™©
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™©
Binding avec
Les bases de knockoutJS
Formation KnockoutJS alphorm.com™©
Djamel BOUCHOUCHAFormateur et Consultant .NETContact : contact@donext.fr
Binding avec les éléments du DOM
Site : http://www.alphorm.comBlog : http://blog.alphorm.comForum : http://forum.alphorm.com
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
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>
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>
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>
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>
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>
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™©
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>
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 ☺
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 BOUCHOUCHAFormateur et Consultant .NETContact : contact@donext.fr
Le context de binding
Site : http://www.alphorm.comBlog : http://blog.alphorm.comForum : http://forum.alphorm.com
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
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 contextcourant
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
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™©
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™©
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 ☺
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™©
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 BOUCHOUCHAFormateur et Consultant .NETContact : contact@donext.fr
Les composants
Site : http://www.alphorm.comBlog : http://blog.alphorm.comForum : http://forum.alphorm.com
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 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
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>' });
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 BOUCHOUCHAFormateur et Consultant .NETContact : contact@donext.fr
Créer un custom binding
Site : http://www.alphorm.comBlog : http://blog.alphorm.comForum : http://forum.alphorm.com
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, 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 »
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 BOUCHOUCHAFormateur et Consultant .NETContact : contact@donext.fr
Développement du projet
Site : http://www.alphorm.comBlog : http://blog.alphorm.comForum : http://forum.alphorm.com
Plan
• Créer le projet
• Sauvegarder le ViewModel en « json »
• Charger le ViewModel depuis du « json »
Formation KnockoutJS alphorm.com™©
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
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
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é
Ce que l’on a couvert
• Nous avons terminé notre programme
• Nous appris à sauvegarder notre ViewModel et le restituer
Formation KnockoutJS alphorm.com™©
Bilan
KnockoutJS
Formation KnockoutJS alphorm.com™©
Djamel BOUCHOUCHAFormateur et Consultant .NETContact : contact@donext.fr
Bilan
Site : http://www.alphorm.comBlog : http://blog.alphorm.comForum : http://forum.alphorm.com
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
See you soon !
Formation KnockoutJS alphorm.com™©
Recommended