Pristup vanjskim podacima s Knockout.js

Za većinu web aplikacija, činjenica da mogu prikupljati korisničke unose putem obrazaca njihova je glavna funkcija, ali to se može ostaviti po strani ako aplikacija kao takva ne može poslati ili primiti podatke na poslužitelj.

Zato postoje jezici na strani poslužitelja ili obrada a JSON kako bi nam pomogli u ovom zadatku, gdje ćemo za potrebe ovog vodiča koristiti jQuery kao JavaScript okvir za obavljanje obrade JSON-a, koji će zamijeniti jezik na strani poslužitelja i pružit će nam unos podataka koje ćemo obraditi u našem modelu.

Zahtjevi

Morat ćemo imati Knockout.js u našem sustavu i pristupačni za aplikacije koje ćemo stvarati, također nam trebaju jQuery koje možemo koristiti lokalno ili s vašeg CDN -a. Dopuštenja za pisanje datoteka, internetska veza za dobivanje knjižnica ako ih nemamo i uređivač teksta, npr Uzvišen tekst ili NotePad ++. Za pokretanje aplikacija potrebna nam je vrsta web poslužitelja Apač ili Nginx u našem okruženju za testiranje.

Izravno ćemo početi raditi na aplikaciji i nećemo se upuštati u neke od koncepata korištenih u primjerima, pa vam preporučujemo šetnju kroz vodiče koji uključuju dinamičke promjene, rukovanje obrascima i naravno povezivanje s Knockout.js.

Čitanje vanjskih podataka

Napravit ćemo jednostavan HTML dokument koji će uključivati ​​knjižnicu Knockout.js kao i jQuery. Mi ćemo stvoriti naš obrazac bez da zaboravimo to učiniti vezivanja elemenata u njoj i konačno u logici za našu ViewModel Izradit ćemo funkciju za rukovanje promjenama u našem obliku pomoću uočljivih podataka, pogledajmo kôd za naš HTML:

 Vanjski podaci
Puno ime:

Prezime:
Omiljene aktivnosti:
Prenesite podatke

Kao što vidimo imamo dokument HTML Jednostavno s nekoliko elemenata, sastoji se od dva tekstualna polja i popisa za odabir, a ako smo promatrači možemo vidjeti da su nam opažanja podjednako prazna, za kraj da vidimo kako izgleda naš početni oblik:

Budući da imamo svoj obrazac, moramo osmisliti naš primjer, a to je da bismo mogli učitati vanjske podatke u našu aplikaciju, zato su naša opažanja prazna. Koristimo jQuery metodu tzv $ .getJSON () koji prima a JSON Kao ulaz, u slučaju da smo radili sa jezikom na strani poslužitelja, moramo navesti put datoteke koja će ga generirati kao izlaz na sljedeći način:

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

Kako ne bismo komplicirali stvari, koristit ćemo a JSON već generirano u našoj aplikaciji, za to stvaramo onu sa sljedećom strukturom koja može mijenjati svoje vrijednosti ako to žele:

 {"ime": "Ime", "prezime": "Prezime", "aktivnosti": ["Bicikl", "Videoigre", "Web razvoj"], "hobiji": "Čitaj"}

Sada možemo promijeniti našu prethodnu funkciju i poslati joj kao parametar naziv naše JSON datoteke, da vidimo:

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

Uključivanjem ove funkcije u naš kôd možemo provjeriti kako naša metoda radi $ .getJSON () i tako dobiti jednu od vrijednosti unutar nje, odgovor naše aplikacije pri pritisku gumba Učitajte podatke, jednostavno će se prikazati naziv.

Kako vidimo da naša metoda savršeno funkcionira, sada moramo samo nakon dobivanja vrijednosti našeg JSON -a uključiti funkciju u naš ViewModel i uspostavimo korespondenciju s identifikatorima našeg obrasca, da vidimo kako izgleda naš konačni kod:

 funkcija 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 (novi UserViewModel ());

Sada samo moramo pokrenuti naš primjer u pregledniku i pritisnuti gumb Prenesite podatke koja moraju odmah popuniti polja našeg obrasca s vrijednostima JSON, da vidimo:

Kao što vidimo, savršeno je funkcionirao i mogli smo čitati vanjske podatke u nekoliko jednostavnih redaka koda. Ovo je vrlo korisno u smislu upotrebljivosti i funkcionalnosti naše aplikacije, ali možemo učiniti malo više, možemo pohraniti podatke u JSON i na taj način proširiti funkcionalnost naše aplikacije.

Pohranjivanje podataka

Za konvencionalne web aplikacije spremanje podataka u JSON formatu jednostavno je poput pretvaranja objekata u taj format i slanja na poslužitelj, ali u slučaju aplikacija koje koriste Knockout.js pitanje je malo kompliciranije od ViewModel koristite opažljiva mjesta umjesto normalnih svojstava JavaScripta, budući da su uočljive funkcije, a pokušaj njihove serijalizacije i slanja na poslužitelj može dovesti do neočekivanih rezultata.

ko.toJSON ()U tim slučajevima imamo sreće, budući da Knockout.js pruža jednostavno i učinkovito rješenje, funkciju ko.toJSON (), koji zamjenjuje sva svojstva promatranih objekata njihovom trenutnom vrijednošću i vraća rezultat kao niz u formatu JSON.

Kako bismo implementirali ovu novu funkcionalnost u našu aplikaciju, izradit ćemo novi gumb u našem obliku pod nazivom Spremi podatke a naša će funkcija biti vezana saveDataPogledajmo kako izgleda naš kod s izmjenama:

 Vanjski podaci
Puno ime:
Prezime:
Omiljene aktivnosti:
Prenesite podatke
Spremite podatke

Ako pokrenemo naš primjer u pregledniku, vidimo kako imamo novi gumb, učitavamo naše vrijednosti, koje ako želimo možemo ih izmijeniti. Na kraju pritisnemo odgovarajući gumb koji bi nam trebao prikazati vrijednosti u našem obliku kao niz u formatu JSON, da vidimo kako to izgleda:

POVEĆAJTE

Konačno, ako želimo da se ti podaci šalju u skriptu na našem poslužitelju, moramo samo unijeti neke promjene u našu novostvorenu funkciju i kada koristimo metodu $ .post dovršavamo proces, da završimo da vidimo kako to izgleda:

 self.gsaveData = function () {var data_submit = {userData: ko.toJSON (self)}; $ .post ("/ save-data", data_send, function (data) {alert ("Podaci su poslani poslužitelju");}); }

Mapiranje podataka za prikaz modela

Način na koji postupamo s našim podacima iz JSON-a sve je što nam je potrebno za izradu robusnih aplikacija i implementaciju bilo koje vrste rješenja na strani poslužitelja neovisnog o jeziku, sve dok se njima rukuje s JSON-om.

No, možemo otići malo dalje i automatski preslikati JSON podatke s poslužitelja na naš ViewModel a to možemo postići dodatkom za Knockout.js zvao knockout-kartiranje. Da bismo ga počeli koristiti, najprije ga moramo preuzeti iz njegova spremišta na GitHubu, raspakirati u okviru našeg projekta i uključiti nakon našeg okvira kako bismo izbjegli pogreške zbog nedostatka ovisnosti.

Sada samo moramo izmijeniti naš kôd i ukloniti naš gumb Učitaj podatke, kao i sva logika Knockout.js, budući da će zahvaljujući našem dodatku dobivanje informacija biti mnogo lakše, pogledajmo naš konačni kod:

 Vanjski podaci
Puno ime:
Prezime:
Omiljene aktivnosti:

Kao što vidimo, naša logika svedena je na samo tri retka koda, što čini kad se naša aplikacija učita, odmah šalje zahtjev Ajax od JSON što mora odgovarati elementima našeg oblika. To uzima izvorne objekte JavaScript i pretvara svako svojstvo u promatrano, izbjegavajući sve te redove koda i čineći ne samo našu aplikaciju robusnijom, već i naš kôd čitljivijim.

Za kraj ako pokrenemo našu aplikaciju, vidimo kako se naše vrijednosti automatski učitavaju u naš obrazac i možemo vidjeti zahtjev Ajax zajedno s odgovorom JSON ako koristimo konzolu preglednika:

Ovako smo završili ovaj vodič, gdje smo mogli vidjeti kako Knockout.js nudi nam način slanja i pohrane podataka bez obzira na jezik na poslužitelju koji se koristi, to nam daje veću slobodu u našoj implementaciji samo promjenom jezika poslužitelja na PHP, Ruby ili Python da navedem samo neke.