For de fleste webapplikasjoner er det faktum at de kan samle brukerinndata gjennom skjemaer deres hovedfunksjon, men dette kan stå til side hvis applikasjonen som sådan ikke kan sende eller motta dataene til serveren.
Det er derfor det er server-side språk eller behandling av en JSON for å hjelpe oss med denne oppgaven, der vi i forbindelse med denne opplæringen skal bruke jQuery som et JavaScript-rammeverk for å utføre behandlingen av en JSON, som vil tjene til å erstatte serversiden språk og vil gi oss datainndata som skal behandles i vår modell.
Krav
Vi må ha Knockout.js i vårt system og tilgjengelig for applikasjonene vi skal lage, trenger vi også jQuery som vi kan bruke lokalt eller fra CDN -en din. Tillatelse til å skrive filer, en Internett -tilkobling for å skaffe bibliotekene hvis vi ikke har dem, og et tekstredigeringsprogram som f.eks. Sublim tekst eller NotePad ++. For å kjøre applikasjonene trenger vi en webservertype Apache eller Nginx i vårt testmiljø.
Vi vil begynne å jobbe med programmet direkte og vil ikke gå nærmere inn på noen av konseptene som brukes i eksemplene, så vi anbefaler å ta en tur gjennom opplæringsprogrammene som involverer dynamiske endringer, skjemahåndtering og selvfølgelig bindinger med Knockout.js.
Lese eksterne data
Vi skal lage et enkelt HTML -dokument som inkluderer biblioteket til Knockout.js i tillegg til jQuery. Vi vil lage skjemaet vårt uten å glemme å gjøre det bindinger av elementene i den og til slutt i logikken for vår ViewModel Vi vil lage funksjonen for å håndtere endringene i skjemaet vårt med observerbare, la oss se koden for HTML -koden vår:
Eksterne dataSom vi ser har vi et dokument HTML Enkelt med noen få elementer, som består av to tekstfelt og en utvalgsliste, og hvis vi er observatører, kan vi se at våre observerbare er like tomme, for å fullføre, la oss se hvordan vår opprinnelige form ser ut:Fullt navn:
Etternavn:
Favorittaktiviteter:Last opp data
Siden vi har skjemaet vårt, må vi forstå vårt eksempel, og det er for å kunne laste eksterne data i applikasjonen vår, det er derfor våre observerbare er tomme. La oss bruke jQuery -metoden som kalles $ .getJSON () som mottar en JSON Som inndata, i tilfelle vi jobbet med et språk på serversiden, må vi spesifisere banen til filen som skal generere den som utdata som følger:
self.loadUserData = function () {$ .getJSON ("/ get-user-data", function (data) {alert (data.name);}); }For ikke å komplisere ting skal vi bruke a JSON allerede generert i applikasjonen vår, for dette lager vi en med følgende struktur som kan variere dens verdier hvis de ønsker det:
{"fornavn": "Fornavn", "etternavn": "Etternavn", "aktiviteter": ["Sykkel", "Videospill", "Nettutvikling"], "hobbies": "Les"}Nå kan vi endre vår forrige funksjon og sende den som parameter navnet på vår JSON -fil, la oss se:
self.loadUserData = function () {$ .getJSON ("user_information.json", function (data) {alert (data.name);}); }Ved å inkludere denne funksjonen i koden vår, kan vi bekrefte hvordan metoden vår fungerer $ .getJSON () og dermed få en av verdiene i den, svaret på applikasjonen vår når du trykker på knappen Last inn data, det vil bare vise navnet.
Som vi ser, fungerer metoden vår perfekt, nå må vi bare etter å ha oppnådd verdiene til vår JSON å inkludere funksjonen i vår ViewModel og gjør korrespondansen med identifikatorene i skjemaet vårt, la oss se hvordan vår endelige kode ser ut:
funksjon 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 ());Nå trenger vi bare å kjøre vårt eksempel i nettleseren og trykke på knappen Last opp data som må fylle ut feltene i skjemaet vårt umiddelbart med verdiene til JSON, la oss se:
Som vi kan se, fungerte det perfekt, og vi kunne lese eksterne data i noen få enkle kodelinjer. Dette er ganske nyttig når det gjelder brukervennlighet og funksjonalitet i applikasjonen vår, men vi kan gjøre litt mer, vi kan lagre dataene i en JSON og dermed utvide funksjonaliteten til applikasjonen vår.
Lagring av data
For konvensjonelle webapplikasjoner er lagring av dataene i JSON -format like enkelt som å konvertere objekter til det formatet og sende dem til serveren, men for applikasjoner som bruker Knockout.js problemet er litt mer komplisert siden ViewModel bruk observerbare i stedet for normale JavaScript -egenskaper, siden observerbare er funksjoner og prøver å serialisere dem og sende dem til serveren kan føre til uventede resultater.
ko.toJSON ()For disse tilfellene har vi flaks, siden Knockout.js gir en enkel og effektiv løsning, funksjonen ko.toJSON (), som erstatter alle egenskapene til de observerbare objektene med deres nåværende verdi og returnerer resultatet som en streng i formatet JSON.
For å implementere denne nye funksjonaliteten i applikasjonen vår, skal vi lage en ny knapp i skjemaet vårt Lagre data og vår funksjon vil være bundet lagre dataLa oss se hvordan koden vår ser ut med endringene:
Eksterne dataHvis vi kjører vårt eksempel i nettleseren, ser vi hvordan vi har en ny knapp, vi laster inn verdiene våre, og hvis vi vil kan vi endre dem. Til slutt trykker vi på den tilsvarende knappen som skal vise oss verdiene i vårt skjema som en streng i format JSON, la oss se hvordan det ser ut:Fullt navn:
Etternavn:
Favorittaktiviteter:Last opp data
Lagre data
FORSTØRRE
Til slutt, hvis vi vil at disse dataene skal sendes til et skript på serveren vår, trenger vi bare å gjøre noen endringer i vår nyopprettede funksjon og når vi bruker metoden $ .post vi fullfører prosessen, for å fullføre, la oss se hvordan den ser ut:
self.gsaveData = function () {var data_submit = {userData: ko.toJSON (self)}; $ .post ("/ save-data", data_send, function (data) {alert ("informasjonen er sendt til serveren");}); }
Datakartlegging for å se modeller
Måten vi håndterer informasjonen vår fra en JSON er alt vi trenger for å lage robuste applikasjoner og implementere enhver form for språkuavhengig løsning på serversiden, så lenge de håndteres med JSON.
Men vi kan gå litt lenger og automatisk kartlegge JSON -dataene fra serveren til vår ViewModel og vi kan oppnå dette med en plug-in for Knockout.js kalt knockout-kartlegging. For å begynne å bruke det, må vi først laste det ned fra depotet på GitHub, pakke det ut i prosjektet vårt og inkludere det etter vårt rammeverk for å unngå feil på grunn av mangel på avhengigheter.
Nå må vi bare endre koden og fjerne knappen Last inn data, så vel som all logikken i Knockout.js, siden takket være vår plug-in å skaffe informasjonen blir mye lettere, la oss se vår siste kode:
Eksterne dataSom vi kan se, ble logikken vår redusert til bare tre kodelinjer, noe som den gjør når applikasjonen vår lastes inn, den sender umiddelbart en forespørsel Ajax av JSON som må samsvare med elementene i skjemaet vårt. Dette tar de opprinnelige objektene til JavaScript og forvandler hver eiendom til en observerbar, unngår alle disse kodelinjene og gjør ikke bare applikasjonen vår mer robust, men koden vår mer lesbar.Fullt navn:
Etternavn:
Favorittaktiviteter:
For å fullføre hvis vi kjører applikasjonen vår, ser vi hvor automatisk verdiene lastes inn i skjemaet vårt, og vi kan se forespørselen Ajax sammen med svaret JSON hvis vi bruker nettleserkonsollen:
Slik fullførte vi denne opplæringen, der vi kunne se hvordan Knockout.js tilbyr oss en måte å sende og lagre data uavhengig av språket på serversiden som brukes, gir dette oss større frihet i implementeringen vår ved å bare endre språket til serveren til PHP, Ruby eller Python for å nevne noen.
