Accesarea datelor externe

Cod

Share

• Share on Facebook
• Tweet
• Share on Google+
• Post to Tumblr
• Pin it
• Add to Pocket
• Send email

Pentru majoritatea aplicațiilor web, colectarea intrărilor de utilizatori este relativ inutilă dacă nu puteți transmite acele date de-a lungul unui server. În această lecție, vom învăța cum să trimiteți și să primiți informații de la un server folosind cereri AJAX. Acest lucru îl pune pe model înapoi în Model-View-ViewModel modelul de design care stau la baza Knockout.js.

Figura 27: Adăugarea modelului în modelul MVVM

Amintiți-vă că Knockout.js este proiectat să fie compatibil cu orice altă tehnologie de la client sau server. Această serie utilizează jQuery's $ .GetJSON () și funcțiile $ .post (), dar sunteți liber să utilizați orice cadru JavaScript care poate trimite și primi date JSON. În mod similar, limbajul de scripting din partea serverului este complet de dvs. În loc să prezentați mostre de cod back-end, această lecție include pur și simplu datele JSON așteptate de Knockout.js. Generarea acestei ieșiri ar trebui să fie trivială pentru a fi implementată în orice limbaj de scripting modern.

---

Un nou formular HTML

Vom folosi o nouă pagină HTML pentru a experimenta integrarea Knockout.js / AJAX. Deoarece această pagină va trebui să interacționeze cu un anumit cod de pe server, asigurați-vă că este accesibil din rădăcina de documente a serverului dvs. local. Vom începe cu ceva similar cu lecția anterioară:

        
 
 
Nume: 
 
Numele de familie: 
 
 Mancarea ta favorita:  Incarca date

Aceasta este o formă de bază cu câteva astfel încât să vedem cum să trimiteți și să primiți informații de la server. Rețineți că includem și biblioteca jQuery înainte de personalizarea noastră

Apoi, ne vom înlocui complet PersonViewModel. În locul lui, vom folosi jQuery $ .GetJSON () metoda de încărcare a unor date inițiale de la server și lăsarea plug-in-ului de cartografiere să genereze dinamic observabile. Înlocuiți întregul personalizat

Atunci când aplicația noastră se încarcă, face imediat o solicitare AJAX pentru datele de utilizator inițiale. Scriptul dvs. pentru server pentru / Get-intial-date ar trebui să returneze același lucru ca ieșirea JSON probă din secțiunea Încărcarea datelor din această lecție. Odată ce datele sunt încărcate, vom crea un ViewModel prin ko.mapping.fromJS (). Aceasta ia obiectul JavaScript nativ generat de script și transformă fiecare proprietate într-o observabilă. Pe lângă metodele saveUserData () și loadUserData (), acest ViewModel generat dinamic are aceleași funcționalități ca și personViewModel.

În acest moment, avem doar inițializat ViewModel noastre cu date de la server. Plug-ul de cartografiere ne permite, de asemenea Actualizați un ViewModel existent în același mod. Să mergem mai departe și să adăugăm o explicație loadUserData () reveniți la modelul ViewModel:

 viewModel.loadUserData = funcția () $ .getJSON ("/ get-user-data", funcția (date) ko.mapping.fromJS (date, viewModel);); 

În vechea versiune a loadUserData (), a trebuit să atribuim manual fiecărei proprietăți de date observatorului său respectiv. Dar acum, cartografiere Plug-in-ul face toate acestea pentru noi. Rețineți că trecerea obiectului de date ca prim argument la ko.mapping.fromJS () îl determină Actualizați ViewModel în loc de inițializarea aceasta.

Pluginul de mapare se referă numai la datele de încărcare, deci saveUserData () rămâne neafectată, cu excepția faptului că trebuie atribuită obiectului Model de vizualizare:

 viewModel.saveUserData = funcția () var data_to_send = userData: ko.toJSON (viewModel); $ .post ("/ save-user-data", date_to_send, function (data) alert ("Datele dvs. au fost postate pe server!");); 

Și acum ar trebui să ne întoarcem la locul unde am început la începutul acestei secțiuni - ambele Incarca date și Salveaza date butoanele ar trebui să funcționeze, iar Knockout.js ar trebui să păstreze vizualizarea și ViewModel sincronizate.

În timp ce nu este un plug-in necesar pentru toate proiectele Knockout.js, cartografiere plug-in-ul face posibilă extinderea la obiecte complexe fără a adăuga o linie suplimentară de cod pentru fiecare proprietate nouă pe care o adăugați la modelul dvs. ViewModel.

rezumat

În această lecție, am aflat cum Knockout.js poate comunica cu un script de pe server. Cea mai mare parte a funcționalității AJAX a venit din cadrul web jQuery, deși Knockout.js oferă o funcție de utilitate utilă pentru a converti observațiile sale în proprietăți JavaScript native. Am discutat, de asemenea, plug-in-ul de cartografiere, care a oferit o modalitate generică de a converti un obiect JavaScript nativ într-un ViewModel cu proprietăți observabile.

Amintiți-vă, Knockout.js este o bibliotecă pur client-side. Este doar pentru conectarea obiectelor JavaScript (ViewModels) cu elemente HTML. După ce ați stabilit această relație, puteți utiliza orice altă tehnologie doriți să comunicați cu serverul. Pe partea clientului, puteți înlocui jQuery cu Dojo, Prototype, MooTools sau orice alt cadru care acceptă solicitări AJAX. Pe partea de server, aveți posibilitatea să alegeți ASP.NET, PHP, Django, Ruby on Rails, Perl, Pagini JavaServer ... veți obține ideea. Această separare a preocupărilor face Knockout.js un instrument incredibil de flexibil de dezvoltare a interfeței utilizator.

Această lecție reprezintă un capitol din Knockout Succinct, o carte electronică gratuită de la echipa de la Syncfusion.