Accesarea datelor externe cu Knockout.js

Pentru majoritatea aplicațiilor web, faptul de a putea colecta datele introduse de utilizator prin intermediul formularelor este funcția lor principală, dar aceasta poate fi lăsată deoparte dacă aplicația ca atare nu poate trimite sau primi datele către server.

De aceea există limbaje de pe server sau procesarea unui JSON pentru a ne ajuta în această sarcină, unde în scopul acestui tutorial vom folosi jQuery ca un cadru JavaScript pentru a efectua procesarea unui JSON, care va servi la înlocuirea limbajului de pe server și ne va furniza date de intrare pentru a fi procesate în modelul nostru.

Cerințe

Va trebui să avem Knockout.js în sistemul nostru și accesibil pentru aplicațiile pe care urmează să le creăm, avem nevoie și de noi jQuery pe care le putem folosi local sau din CDN-ul dvs. Permisiuni pentru a scrie fișiere, o conexiune la Internet pentru a obține bibliotecile dacă nu le avem și un editor de text, cum ar fi Text sublim sau NotePad ++. Pentru a rula aplicațiile avem nevoie de un tip de server web Apache sau Nginx în mediul nostru de testare.

Vom începe să lucrăm direct la aplicație și nu vom aprofunda unele dintre conceptele utilizate în exemple, așa că vă recomandăm să faceți o plimbare prin tutoriale care implică modificări dinamice, gestionarea formularelor și, bineînțeles, legături cu Knockout.js.

Citirea datelor externe

Vom crea un document HTML simplu care va include biblioteca de Knockout.js precum și jQuery. Ne vom crea forma fără a uita să facem legături a elementelor din ea și în cele din urmă în logica pentru a noastră ViewModel Vom crea funcția pentru a gestiona modificările din formularul nostru cu observabile, să vedem codul pentru HTML-ul nostru:

 Date externe
Numele complet:

Nume:
Activități preferate:
Încărcați date

După cum vedem, avem un document HTML Simplu, cu câteva elemente, alcătuit din două câmpuri de text și o listă de selecție, iar dacă suntem observatori putem vedea că observabilele noastre sunt la fel de goale, pentru a termina, să vedem cum arată forma noastră inițială:

Deoarece avem formularul nostru, trebuie să dăm sens exemplului nostru și este să putem încărca date externe în aplicația noastră, de aceea observabilele noastre sunt goale. Să folosim metoda jQuery numită $ .getJSON () care primește o JSON Ca intrare, în cazul în care am lucrat cu un limbaj de pe server, trebuie să specificăm calea fișierului care îl va genera ca ieșire după cum urmează:

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

Pentru a nu complica lucrurile, vom folosi un JSON deja generată în cadrul aplicației noastre, pentru aceasta creăm una cu următoarea structură care poate varia valorile acesteia dacă doresc:

 {"prenume": "Prenume", "prenume": "Numele de familie", "activități": ["Bicicletă", "Jocuri video", "Dezvoltare web"], "hobbies": "Citește"}

Acum putem schimba funcția noastră anterioară și îi putem trimite ca parametru numele fișierului nostru JSON, să vedem:

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

Prin includerea acestei funcții în codul nostru, putem verifica modul în care funcționează metoda noastră $ .getJSON () și astfel obțineți una dintre valorile din interior, răspunsul aplicației noastre atunci când apăsați butonul Încărcați datele, va afișa pur și simplu numele.

După cum vedem metoda noastră funcționează perfect, acum trebuie doar să includem funcția în cadrul nostru după ce obținem valorile JSON ViewModel și să facem corespondența cu identificatorii formularului nostru, să vedem cum arată codul nostru final:

 function 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 (nou UserViewModel ());

Acum nu trebuie decât să rulăm exemplul nostru în browser și să apăsăm butonul Încărcați date care trebuie să completeze imediat câmpurile formularului nostru cu valorile JSON, sa vedem:

După cum putem vedea, a funcționat perfect și am putut citi date externe în câteva linii simple de cod. Acest lucru este destul de util din punct de vedere al utilizabilității și funcționalității aplicației noastre, dar putem face ceva mai mult, putem stoca datele într-un JSON și astfel extindem funcționalitatea aplicației noastre.

Stocarea datelor

Pentru aplicațiile web convenționale, stocarea datelor în format JSON este la fel de simplă ca conversia obiectelor în formatul respectiv și trimiterea lor către server, dar în cazul aplicațiilor care utilizează Knockout.js problema este ceva mai complicată din moment ce ViewModel utilizați observabile în loc de proprietăți JavaScript normale, deoarece observabilele sunt funcții și încercarea de a le serializa și a le trimite la server poate duce la rezultate neașteptate.

ko.toJSON ()Pentru aceste cazuri suntem norocoși, de vreme ce Knockout.js oferă o soluție simplă și eficientă, funcția ko.toJSON (), care înlocuiește toate proprietățile obiectelor observabile cu valoarea lor curentă și returnează rezultatul ca șir în format JSON.

Pentru a implementa această nouă funcționalitate în aplicația noastră, vom crea un nou buton în formularul nostru numit Salveaza date iar funcția noastră va fi legată Salveaza dateSă vedem cum arată codul nostru cu modificările:

 Date externe
Numele complet:
Nume:
Activități preferate:
Încărcați date
Salveaza date

Dacă rulăm exemplul nostru în browser, vedem cum avem un buton nou, ne încărcăm valorile, care, dacă dorim, le putem modifica. În cele din urmă, apăsăm butonul corespunzător care ar trebui să ne arate valorile din formularul nostru ca un șir în format JSON, să vedem cum arată:

MARI

În cele din urmă, dacă dorim ca aceste date să fie trimise către un script de pe serverul nostru, trebuie doar să facem unele modificări în funcția noastră recent creată și când folosim metoda $ .post finalizăm procesul, pentru a termina să vedem cum arată:

 self.gsaveData = function () {var data_submit = {userData: ko.toJSON (self)}; $ .post ("/ save-data", data_send, function (data) {alert ("Informațiile au fost trimise la server");}); }

Cartografierea datelor pentru a vizualiza modelele

Modul în care ne gestionăm informațiile de la un JSON este tot ceea ce avem nevoie pentru a crea aplicații robuste și pentru a implementa orice tip de soluție independentă de limbajul de pe server, atât timp cât acestea sunt tratate cu JSON.

Dar putem merge puțin mai departe și să mapăm automat datele JSON de la server la cele noastre ViewModel și putem realiza acest lucru cu un plug-in pentru Knockout.js numit knockout-mapping. Pentru a începe să-l folosim, trebuie mai întâi să-l descărcăm din depozitul său de pe GitHub, să-l dezarhivăm în cadrul proiectului nostru și să îl includem după cadrul nostru pentru a evita erorile din lipsa dependențelor.

Acum trebuie doar să ne modificăm codul și să eliminăm butonul Incarca date, precum și toată logica Knockout.js, deoarece mulțumită plug-in-ului nostru, obținerea informațiilor va fi mult mai ușoară, să vedem codul nostru final:

 Date externe
Numele complet:
Nume:
Activități preferate:

După cum putem vedea, logica noastră a fost redusă la doar trei linii de cod, ceea ce face este atunci când aplicația noastră se încarcă, face imediat o cerere Ajax din JSON care trebuie să corespundă cu elementele formei noastre. Aceasta ia obiectele native ale JavaScript și transformă fiecare proprietate într-un observabil, evitând toate acele linii de cod și făcând nu numai aplicația noastră mai robustă, ci și codul nostru mai lizibil.

Pentru a finaliza dacă rulăm aplicația, vedem cât de automat se încarcă valorile noastre în formularul nostru și putem vedea solicitarea Ajax împreună cu răspunsul JSON dacă folosim consola browserului:

Așa am terminat acest tutorial, unde am putut vedea cum Knockout.js ne oferă o modalitate de a trimite și stoca date, indiferent de limba de pe server care este utilizată, acest lucru ne oferă o mai mare libertate în implementarea noastră, schimbând doar limba serverului în PHP, Ruby sau Python a numi câteva.