Prieiga prie išorinių duomenų naudojant „Knockout.js“

Daugelio žiniatinklio programų pagrindinė funkcija yra galimybė surinkti vartotojo įvestį naudojant formas, tačiau tai galima palikti nuošalyje, jei pati programa negali siųsti ar gauti duomenų į serverį.

Štai kodėl yra serverio kalbos arba a JSONAS padėti mums atlikti šią užduotį, kur naudosime šios pamokos tikslais „jQuery“ kaip „JavaScript“ sistemą JSON apdorojimui atlikti, kuri pakeis serverio kalbą ir suteiks mums duomenų įvestį, kuri bus apdorota mūsų modelyje.

Reikalavimai

Mums reikės turėti Knockout.js mūsų sistemoje ir yra prieinamos programoms, kurias ketiname kurti, mums taip pat reikia „jQuery“ kuriuos galime naudoti vietoje arba iš jūsų CDN. Leidimai rašyti failus, interneto ryšys bibliotekoms gauti, jei jų neturime, ir teksto redaktorius, pvz. Aukščiausias tekstas arba „NotePad ++“. Norėdami paleisti programas, mums reikia žiniatinklio serverio tipo Apache arba Nginx mūsų bandymų aplinkoje.

Mes pradėsime tiesiogiai dirbti su programa ir nesigilinsime į kai kurias pavyzdžiuose naudojamas sąvokas, todėl rekomenduojame pasivaikščioti po pamokas, kurios apima dinaminius pakeitimus, formų tvarkymą ir, žinoma, susiejimus su Knockout.js.

Išorinių duomenų skaitymas

Mes sukursime paprastą HTML dokumentą, kuriame bus biblioteka Knockout.js taip pat kaip „jQuery“. Mes sukursime savo formą nepamiršdami tai padaryti apkaustai jame esančių elementų ir pagaliau mūsų logikoje „ViewModel“ Mes sukursime funkciją, kaip tvarkyti savo formos pakeitimus, naudojant stebimus objektus, pažiūrėkime HTML kodą:

 Išoriniai duomenys
Pilnas vardas:

Pavardė:
Mėgstamiausia veikla:
Įkelti duomenis

Kaip matome, turime dokumentą HTML Paprasta su keliais elementais, kuriuos sudaro du teksto laukai ir atrankos sąrašas, o jei esame stebėtojai, matome, kad mūsų stebimi objektai yra vienodai tušti, galiausiai pažiūrėkime, kaip atrodo mūsų pradinė forma:

Kadangi turime savo formą, turime suprasti savo pavyzdį ir tai, kad į programą galime įkelti išorinių duomenų, todėl mūsų stebimi objektai yra tušti. Naudokime jQuery metodą, vadinamą $ .getJSON () kuri gauna a JSONAS Jei dirbame su serverio kalba, kaip įvestį turime nurodyti failo, kuris jį sugeneruos, kelią kaip nurodyta toliau:

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

Kad neapsunkintume dalykų, naudosime a JSONAS jau sukurtas mūsų programoje, tam mes sukuriame tokią struktūrą, kuri, jei pageidauja, gali keisti vertes:

 {"vardas": "Vardas", "pavardė": "Pavardė", "veikla": ["Dviratis", "Vaizdo žaidimai", "Žiniatinklio kūrimas"], "pomėgiai": "Skaityti"}

Dabar galime pakeisti ankstesnę funkciją ir nusiųsti ją kaip parametrą mūsų JSON failo pavadinimą, pažiūrėkime:

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

Įtraukę šią funkciją į savo kodą galime patikrinti, kaip veikia mūsų metodas $ .getJSON () ir taip gauti vieną iš joje esančių verčių, mūsų programos atsaką paspaudus mygtuką Įkelkite duomenis, tai bus tik pavadinimas.

Kaip matome, mūsų metodas veikia puikiai, dabar turime tik gauti JSON vertes, kad ši funkcija būtų įtraukta į „ViewModel“ ir susirašykite su mūsų formos identifikatoriais, pažiūrėkime, kaip atrodo mūsų galutinis kodas:

 funkcija UserViewModel () {var self = this; self.name = ko.observable (""); save.pavardė = 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); pomėgiai sau (duomenys. pomėgiai);}); }} ko.applyBindings (naujas UserViewModel ());

Dabar turime tik paleisti savo pavyzdį naršyklėje ir paspausti mygtuką Įkelti duomenis kuris turi nedelsdamas užpildyti mūsų formos laukus reikšmėmis JSONAS, Pažiūrėkime:

Kaip matome, jis puikiai veikė ir galėjome perskaityti išorinius duomenis keliomis paprastomis kodo eilutėmis. Tai labai naudinga mūsų programos naudojimo ir funkcionalumo požiūriu, tačiau galime padaryti šiek tiek daugiau, galime saugoti duomenis JSON ir taip išplėsti savo programos funkcionalumą.

Duomenų saugojimas

Įprastose žiniatinklio programose duomenų saugojimas JSON formatu yra toks pat paprastas, kaip objektų konvertavimas į tą formatą ir siuntimas į serverį, tačiau taikomosiose programose Knockout.js problema yra šiek tiek sudėtingesnė, nes „ViewModel“ naudokite stebimus objektus, o ne įprastas „JavaScript“ ypatybes, nes stebimi objektai yra funkcijos ir bandymas jas suskirstyti serijomis ir siųsti į serverį gali sukelti netikėtų rezultatų.

ko.toJSON ()Šiais atvejais mums pasisekė, nes Knockout.js suteikia paprastą ir veiksmingą sprendimą, funkciją ko.toJSON (), kuris pakeičia visas stebimų objektų savybes jų dabartine verte ir grąžina rezultatą kaip eilutę formatu JSONAS.

Norėdami įdiegti šią naują funkciją savo programoje, mes sukursime naują mygtuką, pavadintą mūsų forma Išsaugoti duomenis ir mūsų funkcija bus susieta išsaugoti duomenisPažiūrėkime, kaip atrodo mūsų kodas su pakeitimais:

 Išoriniai duomenys
Pilnas vardas:
Pavardė:
Mėgstamiausia veikla:
Įkelti duomenis
Išsaugoti duomenis

Jei vykdome savo pavyzdį naršyklėje, matome, kaip turime naują mygtuką, įkeliame savo vertybes, kurias, jei norime, galime jas pakeisti. Galiausiai paspaudžiame atitinkamą mygtuką, kuris mums turėtų parodyti mūsų formos reikšmes kaip eilutės formatą JSONAS, pažiūrėkime, kaip tai atrodo:

DIDELIS

Galiausiai, jei norime, kad šie duomenys būtų siunčiami į scenarijų mūsų serveryje, turime tik atlikti kai kuriuos naujai sukurtos funkcijos pakeitimus ir naudodami metodą $ .post baigiame procesą, pažiūrėkime, kaip tai atrodo:

 self.gsaveData = function () {var data_submit = {userData: ko.toJSON (self)}; $ .post ("/ save-data", data_send, function (data) {alert ("Informacija išsiųsta į serverį");}); }

Duomenų susiejimas, norint peržiūrėti modelius

Tai, kaip mes tvarkome savo informaciją iš JSON, yra viskas, ko mums reikia norint sukurti tvirtas programas ir įdiegti bet kokius nuo serverio nepriklausančius kalbos sprendimus, jei jie tvarkomi su JSON.

Bet mes galime eiti šiek tiek toliau ir automatiškai susieti JSON duomenis iš serverio į mūsų „ViewModel“ ir mes galime tai pasiekti naudodami papildinį Knockout.js paskambino nokautas-kartografavimas. Norėdami pradėti ją naudoti, pirmiausia turime ją atsisiųsti iš jos saugyklos „GitHub“, išpakuoti ją savo projekte ir įtraukti ją po mūsų sistemos, kad išvengtume klaidų dėl priklausomybių trūkumo.

Dabar mes tiesiog turime pakeisti savo kodą ir pašalinti mygtuką Įkelti duomenis, taip pat visa logika Knockout.js, nes mūsų papildinio dėka informaciją gauti bus daug lengviau, pažiūrėkime galutinį kodą:

 Išoriniai duomenys
Pilnas vardas:
Pavardė:
Mėgstamiausia veikla:

Kaip matome, mūsų logika buvo sumažinta iki trijų kodo eilučių, ką ji daro, kai mūsų programa įkeliama, ji iš karto pateikia užklausą Ajax iš JSONAS kurie turi atitikti mūsų formos elementus. Tai užima vietinius objektus „JavaScript“ ir kiekvieną nuosavybę paverčia stebima, išvengdama visų tų kodo eilučių ir ne tik kad mūsų programa yra patvaresnė, bet ir mūsų kodas lengviau skaitomas.

Baigdami, paleidę programą, matome, kaip automatiškai įkeliamos mūsų vertės į formą, ir matome užklausą Ajax kartu su atsakymu JSON, jei naudojame naršyklės konsolę:

Taip baigėme šią pamoką, kur galėjome pamatyti, kaip Knockout.js siūlo mums būdą siųsti ir saugoti duomenis, neatsižvelgiant į naudojamą serverio kalbą, tai suteikia mums didesnę laisvę įgyvendinti tik pakeitus serverio kalbą į PHP, Ruby arba Python Išvardyti kelis.