Lielākajai daļai tīmekļa lietojumprogrammu galvenā funkcija ir lietotāja ievades apkopošana, izmantojot veidlapas, taču to var atstāt malā, ja lietojumprogramma kā tāda nevar nosūtīt vai saņemt datus uz serveri.
Tāpēc ir servera puses valodas vai a JSON lai palīdzētu mums šajā uzdevumā, kur mēs izmantosim šīs apmācības nolūkos jQuery kā JavaScript ietvaru, lai veiktu JSON apstrādi, kas aizstās servera puses valodu un nodrošinās mums datu ievadi, kas jāapstrādā mūsu modelī.
Prasības
Mums būs jābūt Knockout.js mūsu sistēmā un ir pieejamas arī tām lietojumprogrammām, kuras mēs gatavojamies izveidot jQuery ko mēs varam izmantot lokāli vai no jūsu CDN. Atļaujas rakstīt failus, interneta savienojums, lai iegūtu bibliotēkas, ja mums to nav, un teksta redaktors, piemēram, Cildens teksts vai NotePad ++. Lai palaistu lietojumprogrammas, mums ir nepieciešams tīmekļa servera tips Apache vai Nginx mūsu testēšanas vidē.
Mēs sāksim strādāt ar lietojumprogrammu tieši un neiedziļināsimies dažos piemēros izmantotajos jēdzienos, tāpēc iesakām izstaigāt apmācības, kas ietver dinamiskas izmaiņas, veidlapu apstrādi un, protams, saistīšanu ar Knockout.js.
Ārējo datu lasīšana
Mēs izveidosim vienkāršu HTML dokumentu, kurā būs iekļauta bibliotēka Knockout.js kā arī jQuery. Mēs izveidosim savu formu, neaizmirstot to izdarīt stiprinājumi no tajā esošajiem elementiem un visbeidzot mūsu loģikā ViewModel Mēs izveidosim funkciju, lai apstrādātu izmaiņas mūsu veidlapā, izmantojot novērojamās lietas, apskatīsim mūsu HTML kodu:
Ārējie datiKā redzam, mums ir dokuments HTML Vienkāršs ar dažiem elementiem, kas sastāv no diviem teksta laukiem un atlases saraksta, un, ja mēs esam novērotāji, mēs redzam, ka mūsu novērojamie objekti ir vienādi tukši, lai pabeigtu, redzēsim, kā izskatās mūsu sākotnējā forma:Pilnais vārds:
Uzvārds:
Mīļākās aktivitātes:Augšupielādēt datus
Tā kā mums ir sava forma, mums ir jāizprot mūsu piemērs un jāspēj ielādēt ārējos datus mūsu lietojumprogrammā, tāpēc mūsu novērojamie objekti ir tukši. Izmantosim jQuery metodi ar nosaukumu $ .getJSON () kas saņem a JSON Ja mēs strādājām ar servera puses valodu, mums kā ievadi ir jānorāda faila ceļš, kas to ģenerēs kā izvadi, šādi:
self.loadUserData = function () {$ .getJSON ("/ get-user-data", function (data) {alert (data.name);}); }Lai nesarežģītu lietas, mēs izmantosim a JSON kas jau ir ģenerēts mūsu lietojumprogrammā, šim nolūkam mēs izveidojam vienu ar šādu struktūru, kuras vērtības var mainīt, ja vēlas:
{"vārds": "Vārds", "uzvārds": "Uzvārds", "aktivitātes": ["Velosipēds", "Videospēles", "Tīmekļa izstrāde"], "vaļasprieki": "Lasīt"}Tagad mēs varam mainīt savu iepriekšējo funkciju un nosūtīt to kā parametru mūsu JSON faila nosaukumu, redzēsim:
self.loadUserData = function () {$ .getJSON ("user_information.json", function (data) {alert (data.name);}); }Iekļaujot šo funkciju mūsu kodā, mēs varam pārbaudīt, kā darbojas mūsu metode $ .getJSON () un tādējādi iegūt vienu no tajā esošajām vērtībām, mūsu lietojumprogrammas reakciju, nospiežot pogu Ielādējiet datus, tas vienkārši parādīs vārdu.
Kā mēs redzam, ka mūsu metode darbojas perfekti, tagad mums tikai pēc tam, kad ir iegūtas mūsu JSON vērtības, ir jāiekļauj funkcija mūsu ViewModel un izveidojiet atbilstību mūsu veidlapas identifikatoriem, redzēsim, kā izskatās mūsu galīgais kods:
funkcija UserViewModel () {var self = this; self.name = ko.observable (""); sevi.uzvārds = ko.observable (""); self.activities = ko.observableArray ([]); self.hobbies = ko.observable (""); self.loadUserData = function () {$ .getJSON ("user_information.json", function (data) {self.name (data.name); self.statname (data.lastname); self.activities (data.activities); sevis vaļasprieki (dati. hobiji);}); }} ko.applyBindings (jauns UserViewModel ());Tagad mums tikai jāpalaiž mūsu piemērs pārlūkprogrammā un jānospiež poga Augšupielādēt datus kam nekavējoties jāaizpilda mūsu veidlapas lauki ar JSON, paskatīsimies:
Kā redzam, tas strādāja perfekti, un mēs varējām nolasīt ārējos datus dažās vienkāršās koda rindās. Tas ir diezgan noderīgi mūsu lietojumprogrammas lietojamības un funkcionalitātes ziņā, taču mēs varam darīt nedaudz vairāk, mēs varam uzglabāt datus JSON un tādējādi paplašināt mūsu lietojumprogrammas funkcionalitāti.
Datu uzglabāšana
Parastajām tīmekļa lietojumprogrammām datu glabāšana JSON formātā ir tikpat vienkārša kā objektu konvertēšana šajā formātā un nosūtīšana uz serveri, bet lietojumprogrammām, kas izmanto Knockout.js jautājums ir nedaudz sarežģītāks kopš ViewModel izmantojiet novērojamos materiālus, nevis parastos JavaScript rekvizītus, jo novērojamie ir funkcijas un mēģinājumi tos sērijveidot un nosūtīt uz serveri var radīt negaidītus rezultātus.
ko.toJSON ()Šādos gadījumos mums ir paveicies, jo Knockout.js nodrošina vienkāršu un efektīvu risinājumu - funkciju ko.toJSON (), kas aizstāj visas novērojamo objektu īpašības ar to pašreizējo vērtību un atgriež rezultātu formātā kā virkni JSON.
Lai ieviestu šo jauno funkcionalitāti mūsu lietojumprogrammā, mēs veidosim jaunu pogu mūsu formā Saglabāt datus un mūsu funkcija būs saistīta saveDataApskatīsim, kā izskatās mūsu kods ar modifikācijām:
Ārējie datiJa mēs izpildām savu piemēru pārlūkprogrammā, mēs redzam, kā mums ir jauna poga, mēs ielādējam savas vērtības, kuras, ja vēlamies, varam tās mainīt. Visbeidzot, mēs nospiežam atbilstošo pogu, kurai vajadzētu parādīt vērtības mūsu formā kā virkni formātā JSON, redzēsim, kā tas izskatās:Pilnais vārds:
Uzvārds:
Mīļākās aktivitātes:Augšupielādēt datus
Saglabājiet datus
PALIELINĀT
Visbeidzot, ja mēs vēlamies, lai šie dati tiktu nosūtīti uz skriptu mūsu serverī, mums ir jāveic tikai dažas izmaiņas mūsu jaunizveidotajā funkcijā un, izmantojot šo metodi $ .post mēs pabeidzam procesu, lai pabeigtu, redzēsim, kā tas izskatās:
self.gsaveData = function () {var data_submit = {userData: ko.toJSON (self)}; $ .post ("/ save-data", data_send, function (data) {alert ("Informācija ir nosūtīta uz serveri");}); }
Datu kartēšana modeļu skatīšanai
Tas, kā mēs apstrādājam savu informāciju no JSON, ir viss, kas mums nepieciešams, lai izveidotu stabilas lietojumprogrammas un ieviestu jebkāda veida no servera puses neatkarīgus valodas risinājumus, ja vien tie tiek apstrādāti kopā ar JSON.
Bet mēs varam iet nedaudz tālāk un automātiski kartēt JSON datus no servera uz mūsu ViewModel un mēs to varam sasniegt ar spraudni for Knockout.js sauca nokauts-kartēšana. Lai sāktu to lietot, mums tas vispirms ir jālejupielādē no tā krātuves vietnē GitHub, jāizpako tas mūsu projektā un jāiekļauj pēc mūsu ietvara, lai izvairītos no kļūdām atkarību trūkuma dēļ.
Tagad mums tikai jāmaina savs kods un jānoņem poga Ielādēt datus, kā arī visa loģika Knockout.js, jo, pateicoties mūsu spraudnim, informācijas iegūšana būs daudz vienkāršāka, apskatīsim mūsu galīgo kodu:
Ārējie datiKā redzam, mūsu loģika tika samazināta līdz tikai trim koda rindām, ko tā dara, kad tiek ielādēta mūsu lietojumprogramma, tā nekavējoties izsaka pieprasījumu Ajax no JSON kam jāatbilst mūsu veidlapas elementiem. Tas aizņem vietējos objektus JavaScript un pārveido katru īpašumu par novērojamu, izvairoties no visām šīm koda rindām un padarot ne tikai mūsu lietojumprogrammu izturīgāku, bet arī mūsu kodu lasāmāku.Pilnais vārds:
Uzvārds:
Mīļākās aktivitātes:
Lai pabeigtu, palaižot mūsu lietojumprogrammu, mēs redzam, kā automātiski tiek ielādētas mūsu vērtības mūsu veidlapā, un mēs varam redzēt pieprasījumu Ajax kopā ar atbildi JSON, ja mēs izmantojam pārlūkprogrammas konsoli:
Tā mēs pabeidzām šo pamācību, kur varējām redzēt, kā Knockout.js piedāvā mums veidu, kā nosūtīt un uzglabāt datus neatkarīgi no izmantotās servera valodas, tas dod mums lielāku brīvību īstenošanā, mainot tikai servera valodu uz PHP, Ruby vai Python nosaukt dažus.
