Pour la plupart des applications Web, le fait de pouvoir collecter les entrées des utilisateurs via des formulaires est leur fonction principale, mais cela peut être laissé de côté si l'application en tant que telle ne peut pas envoyer ou recevoir les données au serveur.
C'est pourquoi il existe des langages côté serveur ou le traitement d'un JSON pour nous aider dans cette tâche, où pour les besoins de ce tutoriel nous utiliserons jQuery en tant que framework JavaScript pour effectuer le traitement d'un JSON, qui servira à remplacer le langage côté serveur et nous fournira des données d'entrée à traiter dans notre modèle.
Exigences
Nous aurons besoin d'avoir Knockout.js dans notre système et accessible pour les applications que nous allons créer, nous avons également besoin jQuery que nous pouvons utiliser localement ou depuis votre CDN. Des autorisations pour écrire des fichiers, une connexion Internet pour obtenir les bibliothèques si nous ne les avons pas, et un éditeur de texte tel que Texte sublime ou Bloc-notes ++. Pour exécuter les applications, nous avons besoin d'un type de serveur Web Apache ou alors Nginx dans notre environnement de test.
Nous commencerons à travailler directement sur l'application et n'approfondirons pas certains des concepts utilisés dans les exemples, nous vous recommandons donc de parcourir les didacticiels qui impliquent des modifications dynamiques, la gestion de formulaires et bien sûr des liaisons avec Knockout.js.
Lecture de données externes
Nous allons créer un document HTML simple qui inclura la bibliothèque de Knockout.js aussi bien que jQuery. Nous allons créer notre formulaire sans oublier de faire le reliures des éléments qu'il contient et enfin dans la logique de notre VoirModèle Nous allons créer la fonction pour gérer les changements dans notre formulaire avec les observables, voyons le code de notre HTML :
Données externesComme nous le voyons, nous avons un document HTML Simple avec quelques éléments, composé de deux champs de texte et d'une liste de sélection, et si nous sommes des observateurs nous pouvons voir que nos observables sont également vides, pour finir voyons à quoi ressemble notre formulaire initial :Nom complet:
Le nom:
Activités favorites:Télécharger des données
Puisque nous avons notre formulaire nous devons donner un sens à notre exemple et c'est pour pouvoir charger des données externes dans notre application, c'est pourquoi nos observables sont vides. Utilisons la méthode jQuery appelée $ .getJSON () qui reçoit un JSON En entrée, au cas où nous travaillions avec un langage côté serveur, nous devons spécifier le chemin du fichier qui le générera en sortie comme suit :
self.loadUserData = function () {$ .getJSON ("/ get-user-data", function (data) {alert (data.name);}); }Afin de ne pas compliquer les choses, nous allons utiliser un JSON déjà généré au sein de notre application, pour cela nous en créons une avec la structure suivante qui peut faire varier ses valeurs si elles le souhaitent :
{"prénom": "Prénom", "nom": "Nom", "activités": ["Vélo", "Jeux vidéo", "Développement Web"], "loisirs": "Lire"}Maintenant nous pouvons changer notre fonction précédente et lui envoyer en paramètre le nom de notre fichier JSON, voyons :
self.loadUserData = function () {$ .getJSON ("user_information.json", function (data) {alert (data.name);}); }En incluant cette fonction dans notre code, nous pouvons vérifier le fonctionnement de notre méthode $ .getJSON () et ainsi obtenir l'une des valeurs qu'il contient, la réponse de notre application lors de l'appui sur le bouton Chargez les données, il affichera simplement le nom.
Comme nous voyons que notre méthode fonctionne parfaitement, il ne nous reste plus qu'après avoir obtenu les valeurs de notre JSON à inclure la fonction dans notre VoirModèle et faire la correspondance avec les identifiants de notre formulaire, voyons à quoi ressemble notre code final :
function UserViewModel () {var self = this; self.name = ko.observable (""); self.nom = ko.observable (""); self.activities = ko.observableArray ([]); self.hobbies = ko.observable (""); self.loadUserData = function () {$ .getJSON ("user_information.json", function (data) {self.name (data.name); self.lastname (data.lastname); self.activities (data.activities); self.hobbies (data.hobbies);}); }} ko.applyBindings (nouveau UserViewModel ());Il ne nous reste plus qu'à exécuter notre exemple dans le navigateur et appuyer sur le bouton Télécharger des données qui doit remplir les champs de notre formulaire immédiatement avec les valeurs du JSON, Voyons voir:
Comme nous pouvons le voir, cela a parfaitement fonctionné et nous avons pu lire des données externes en quelques lignes de code simples. C'est assez utile en termes d'ergonomie et de fonctionnalité de notre application mais nous pouvons faire un peu plus, nous pouvons stocker les données dans un JSON et ainsi étendre les fonctionnalités de notre application.
Stockage des données
Pour les applications Web conventionnelles, le stockage des données au format JSON est aussi simple que de convertir des objets dans ce format et de les envoyer au serveur, mais dans le cas des applications qui utilisent Knockout.js le problème est un peu plus compliqué car le VoirModèle utilisez des observables au lieu des propriétés JavaScript normales, car les observables sont des fonctions et essayer de les sérialiser et de les envoyer au serveur peut conduire à des résultats inattendus.
ko.toJSON ()Pour ces cas, nous avons de la chance, car Knockout.js apporte une solution simple et efficace, la fonction ko.toJSON (), qui remplace toutes les propriétés des objets observables par leur valeur actuelle et renvoie le résultat sous forme de chaîne au format JSON.
Pour implémenter cette nouvelle fonctionnalité dans notre application, nous allons créer un nouveau bouton dans notre formulaire appelé Enregistrer des données et notre fonction sera liée enregistrer des donnéesVoyons à quoi ressemble notre code avec les modifications :
Données externesSi nous exécutons notre exemple dans le navigateur, nous voyons comment nous avons un nouveau bouton, nous chargeons nos valeurs, que nous pouvons modifier si nous le souhaitons. Enfin, nous appuyons sur le bouton correspondant qui devrait nous montrer les valeurs dans notre formulaire sous forme de chaîne au format JSON, voyons à quoi cela ressemble :Nom complet:
Le nom:
Activités favorites:Télécharger des données
Enregistrer des données
AGRANDIR
Enfin, si nous voulons que ces données soient envoyées à un script sur notre serveur, nous n'avons qu'à apporter quelques modifications dans notre fonction nouvellement créée et lors de l'utilisation de la méthode $ .post nous terminons le processus, pour finir voyons à quoi cela ressemble :
self.gsaveData = function () {var data_submit = {userData: ko.toJSON (self)}; $ .post ("/ save-data", data_send, function (data) {alert ("Les informations ont été envoyées au serveur");}); }
Mappage des données sur les modèles de vue
La façon dont nous traitons nos informations à partir d'un JSON est tout ce dont nous avons besoin pour créer des applications robustes et implémenter tout type de solution indépendante du langage côté serveur, à condition qu'elles soient gérées avec JSON.
Mais nous pouvons aller un peu plus loin et mapper automatiquement les données JSON du serveur à notre VoirModèle et nous pouvons y parvenir avec un plug-in pour Knockout.js appelé mappage knock-out. Pour commencer à l'utiliser, nous devons d'abord le télécharger depuis son référentiel sur GitHub, le décompresser dans notre projet et l'inclure après notre framework pour éviter les erreurs dues au manque de dépendances.
Il ne nous reste plus qu'à modifier notre code et supprimer notre bouton Charger les données, ainsi que toute la logique de Knockout.js, puisque grâce à notre plug-in obtenir les informations sera beaucoup plus facile, voyons notre code final :
Données externesComme nous pouvons le voir, notre logique a été réduite à seulement trois lignes de code, ce qu'elle fait lorsque notre application se charge, elle fait immédiatement une requête Ajax du JSON qui doit correspondre aux éléments de notre formulaire. Cela prend les objets natifs de JavaScript et transforme chaque propriété en un observable, évitant toutes ces lignes de code et rendant non seulement notre application plus robuste mais notre code plus lisible.Nom complet:
Le nom:
Activités favorites:
Pour finir, si nous exécutons notre application, nous voyons comment nos valeurs se chargent automatiquement dans notre formulaire et nous pouvons voir la demande Ajax avec la réponse JSON si nous utilisons la console du navigateur :
C'est ainsi que nous avons terminé ce tutoriel, où nous avons pu voir comment Knockout.js nous offre un moyen d'envoyer et de stocker des données quelle que soit la langue côté serveur utilisée, cela nous donne une plus grande liberté dans notre implémentation en changeant uniquement la langue du serveur en PHP, Ruby ou Python pour n'en nommer que quelques-uns.
