Adgang til eksterne data med Knockout.js

For de fleste webapplikationer er det faktum, at de er i stand til at indsamle brugerinput via formularer, deres hovedfunktion, men dette kan stå til side, hvis applikationen som sådan ikke kan sende eller modtage dataene til serveren.

Derfor er der sprog på serversiden eller behandling af en JSON for at hjælpe os med denne opgave, hvor vi i forbindelse med denne vejledning vil bruge jQuery som en JavaScript-ramme til at udføre behandlingen af ​​en JSON, som tjener til at erstatte sproget på serversiden og vil give os datainput, der skal behandles i vores model.

Krav

Vi bliver nødt til at have Knockout.js i vores system og tilgængeligt for de applikationer, vi skal oprette, har vi også brug for jQuery som vi kan bruge lokalt eller fra dit CDN. Tilladelser til at skrive filer, en internetforbindelse til at skaffe bibliotekerne, hvis vi ikke har dem, og en tekstredigerer som f.eks. Sublim tekst eller NotePad ++. For at køre applikationerne har vi brug for en webservertype Apache eller Nginx i vores testmiljø.

Vi vil begynde at arbejde på applikationen direkte og vil ikke fordybe os i nogle af de begreber, der bruges i eksemplerne, så vi anbefaler at gå en tur gennem selvstudierne, der involverer dynamiske ændringer, formhåndtering og naturligvis bindinger med Knockout.js.

Læsning af eksterne data

Vi skal lave et simpelt HTML -dokument, der inkluderer biblioteket af Knockout.js såvel som jQuery. Vi opretter vores formular uden at glemme at gøre det bindinger af elementerne i den og endelig i logikken for vores ViewModel Vi vil oprette funktionen til at håndtere ændringerne i vores form med de observerbare, lad os se koden til vores HTML:

 Eksterne data
Fulde navn:

Efternavn:
Foretrukne aktiviteter:
Upload data

Som vi ser har vi et dokument HTML Enkelt med et par elementer, der består af to tekstfelter og en udvælgelsesliste, og hvis vi er observatører, kan vi se, at vores observerbare er lige tomme, lad os afslutte, hvordan vores oprindelige form ser ud:

Da vi har vores form, skal vi give mening om vores eksempel, og det er for at kunne indlæse eksterne data i vores applikation, det er derfor, vores observerbare er tomme. Lad os bruge jQuery -metoden kaldet $ .getJSON () som modtager en JSON Som input, hvis vi arbejdede med et sprog på serversiden, skal vi angive stien til filen, der vil generere den som output som følger:

 self.loadUserData = function () {$ .getJSON ("/ get-user-data", function (data) {alert (data.navn);}); }

For ikke at komplicere ting, vil vi bruge en JSON allerede genereret i vores applikation, til dette opretter vi en med følgende struktur, der kan variere dens værdier, hvis de ønsker det:

 {"fornavn": "Fornavn", "efternavn": "Efternavn", "aktiviteter": ["Cykel", "Videospil", "Webudvikling"], "hobbies": "Læs"}

Nu kan vi ændre vores tidligere funktion og sende den som parameter navnet på vores JSON -fil, lad os se:

 self.loadUserData = function () {$ .getJSON ("user_information.json", function (data) {alert (data.name);}); }

Ved at inkludere denne funktion i vores kode kan vi kontrollere, hvordan vores metode fungerer $ .getJSON () og dermed opnå en af ​​værdierne i den, svaret på vores applikation, når du trykker på knappen Indlæs data, det viser ganske enkelt navnet.

Da vi ser, at vores metode fungerer perfekt, er vi nu kun nødt til efter at have opnået værdierne for vores JSON at inkludere funktionen i vores ViewModel og foretag korrespondance med identifikatorerne i vores formular, lad os se, hvordan vores endelige kode ser ud:

 funktion UserViewModel () {var self = this; self.name = ko.observable (""); self.lastname = 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 (ny UserViewModel ());

Nu skal vi kun køre vores eksempel i browseren og trykke på knappen Upload data som skal udfylde felterne i vores formular med det samme med værdierne for JSON, Lad os se:

Som vi kan se, fungerede det perfekt, og vi kunne læse eksterne data i et par enkle kodelinjer. Dette er ganske nyttigt med hensyn til brugervenlighed og funktionalitet i vores applikation, men vi kan gøre lidt mere, vi kan gemme dataene i en JSON og dermed udvide funktionaliteten af ​​vores applikation.

Lagring af data

For konventionelle webapplikationer er lagring af data i JSON -format lige så simpelt som at konvertere objekter til det format og sende dem til serveren, men i tilfælde af applikationer, der bruger Knockout.js problemet er lidt mere kompliceret siden ViewModel brug observerbare i stedet for normale JavaScript -egenskaber, da observerbare er funktioner og forsøg på at serialisere dem og sende dem til serveren kan føre til uventede resultater.

ko.toJSON ()For disse sager har vi held, da Knockout.js giver en enkel og effektiv løsning, funktionen ko.toJSON (), som erstatter alle egenskaberne for de observerbare objekter med deres aktuelle værdi og returnerer resultatet som en streng i formatet JSON.

For at implementere denne nye funktionalitet i vores applikation skal vi oprette en ny knap i vores formular kaldet Gem data og vores funktion vil være bundet saveDataLad os se, hvordan vores kode ser ud med ændringerne:

 Eksterne data
Fulde navn:
Efternavn:
Foretrukne aktiviteter:
Upload data
Gem data

Hvis vi kører vores eksempel i browseren, ser vi, hvordan vi har en ny knap, vi indlæser vores værdier, som vi kan ændre dem, hvis vi vil. Endelig trykker vi på den tilsvarende knap, som skal vise os værdierne i vores form som en streng i format JSON, lad os se, hvordan det ser ud:

FORSTØRRE

Endelig, hvis vi ønsker, at disse data skal sendes til et script på vores server, skal vi kun foretage nogle ændringer i vores nyoprettede funktion, og når vi bruger metoden $ .indlæg vi afslutter processen, for at afslutte lad os se, hvordan det ser ud:

 self.gsaveData = function () {var data_submit = {userData: ko.toJSON (self)}; $ .post ("/ save-data", data_send, function (data) {alert ("Informationen er sendt til serveren");}); }

Datakortlægning for at se modeller

Den måde, vi håndterer vores oplysninger på fra en JSON, er alt, hvad vi har brug for for at lave robuste applikationer og implementere enhver form for sprogsuafhængig løsning på serversiden, så længe de håndteres med JSON.

Men vi kan gå lidt længere og automatisk kortlægge JSON -dataene fra serveren til vores ViewModel og vi kan opnå dette med et plug-in til Knockout.js hedder knockout-kortlægning. For at begynde at bruge det skal vi først downloade det fra dets depot på GitHub, pakke det ud i vores projekt og inkludere det efter vores rammer for at undgå fejl på grund af manglen på afhængigheder.

Nu skal vi bare ændre vores kode og fjerne vores knap Indlæs data, samt al logik i Knockout.js, da takket være vores plug-in at få informationen bliver meget lettere, lad os se vores endelige kode:

 Eksterne data
Fulde navn:
Efternavn:
Foretrukne aktiviteter:

Som vi kan se, blev vores logik reduceret til kun tre linjer med kode, hvilket det gør, når vores applikation indlæses, det sender straks en anmodning Ajax af JSON som skal svare til elementerne i vores form. Dette tager de oprindelige objekter af JavaScript og forvandler hver ejendom til en observerbar, undgår alle disse kodelinjer og gør ikke kun vores applikation mere robust, men vores kode mere læsbar.

For at afslutte, hvis vi kører vores applikation, ser vi, hvor automatisk vores værdier indlæses i vores formular, og vi kan se anmodningen Ajax sammen med svaret JSON, hvis vi bruger browserkonsollen:

Sådan afsluttede vi denne vejledning, hvor vi kunne se hvordan Knockout.js tilbyder os en måde at sende og gemme data uanset det sprog på serversiden, der bruges, giver dette os større frihed i vores implementering ved kun at ændre serverens sprog til PHP, Ruby eller Python for at nævne et par stykker.