Share
For de fleste webapplikasjoner er samling av brukerinngang relativt ubrukelig hvis du ikke kan overføre dataene til en server. I denne leksjonen lærer vi hvordan du sender og mottar informasjon fra en server ved hjelp av AJAX-forespørsler. Dette setter modell tilbake til modell-View-ViewModel designmønsteret under Knockout.js.
Figur 27: Legge til modellen tilbake i vårt MVVM-mønster Husk at Knockout.js er designet for å være kompatibel med hvilken som helst annen klientside eller server-side teknologi. Denne serien bruker jQuery's $ .GetJSON () og $. post () -funksjoner, men du kan bruke noen JavaScript-rammer som kan sende og motta JSON-data. På samme måte er server-side skriptspråk helt opp til deg. I stedet for å presentere tilbakemeldingskodeprøver, inneholder denne leksjonen bare JSON-dataene som forventes av Knockout.js. Å generere denne utgangen bør være trivial å implementere i alle moderne skriptspråk.
Vi skal bruke en fersk HTML-side for å eksperimentere med Knockout.js / AJAX-integrasjon. Siden denne siden må samhandle med noen server-side-kode, må du kontrollere at den er tilgjengelig fra dokumentroten til den lokale serveren. Vi starter med noe som ligner på forrige leksjon:
Eksterne data
Dette er en grunnleggende form med noen få felt slik at vi kan se hvordan du sender og mottar informasjon fra serveren. Legg merke til at vi også inkluderer jQuery-biblioteket før vår tilpassede
Deretter skal vi helt erstatte vår PersonViewModel. I stedet bruker vi jQuery's $ .GetJSON () Metode for å laste inn noen innledende data fra serveren og la kartleggingspluggen dynamisk generere observerbare data. Bytt ut hele tilpasset
Når vår søknad laster, gjør den umiddelbart en AJAX-forespørsel om de første brukerdataene. Din server-side script for / Få-førstegangs-data skal returnere det samme som prøven JSON-utgang fra delen Loading data i denne leksjonen. Når dataene er lastet, oppretter vi en ViewModel via ko.mapping.fromJS (). Dette tar det opprinnelige JavaScript-objektet som genereres av skriptet, og gjør hver eiendom til en observerbar. Bortsett fra metodene saveUserData () og loadUserData (), har denne dynamisk genererte ViewModel nøyaktig samme funksjonalitet som PersonViewModel.
På dette tidspunktet har vi bare initialisert vår ViewModel med data fra serveren. Kartleggingspluggen lar oss også Oppdater en eksisterende ViewModel på samme måte. La oss gå videre og legge til en eksplisitt loadUserData () Metoden tilbake til ViewModel:
Accentsconagua
viewModel.loadUserData = function () $ .getJSON ("/ get-user-data", funksjon (data) ko.mapping.fromJS (data, viewModel);); I den gamle versjonen av loadUserData (), Vi måtte manuelt tilordne hver dataegenskap til dens respektive observerbare. Men nå, den kartlegging plug-in gjør alt dette for oss. Merk at passering av dataobjektet som det første argumentet til ko.mapping.fromJS () fører til det Oppdater ViewModel i stedet for initialisering den.
Kartleggingspluggen gjelder bare for lasting av data, så saveUserData () forblir upåvirket bortsett fra det faktum at den må tildeles til viewModel-objektet:
viewModel.saveUserData = funksjon () var data_to_send = userData: ko.toJSON (viewModel); $ .post ("/ save-user-data", data_to_send, funksjon (data) alert ("Dine data er lagt ut på serveren!");); Og nå skal vi være tilbake til hvor vi startet i begynnelsen av denne delen - begge Last data og Lagre data knapper skal fungere, og Knockout.js bør holde synspunktet og ViewModel synkronisert.
Selv om det ikke er nødvendig plug-in for alle Knockout.js-prosjekter, kartlegging plug-in gjør det mulig å skalere opp til komplekse objekter uten å legge til en ekstra linje med kode for hver ny egenskap du legger til i ViewModel.
I denne leksjonen lærte vi hvordan Knockout.js kan kommunisere med et server-side script. Det meste av AJAX-relatert funksjonalitet kom fra jQuery-nettverket, selv om Knockout.js gir en fin verktøyfunksjon for å konvertere observabellene til innfødte JavaScript-egenskaper. Vi diskuterte også kartpluggen, som ga en generell måte å konvertere et innfødt JavaScript-objekt til en ViewModel med observerbare egenskaper.
Husk, Knockout.js er et rent klientsidebibliotek. Det er bare for å koble til JavaScript-objekter (ViewModels) med HTML-elementer. Når du har opprettet dette forholdet, kan du bruke hvilken som helst annen teknologi du liker å kommunisere med serveren. På klientsiden kan du erstatte jQuery med Dojo, Prototype, MooTools eller andre rammer som støtter AJAX-forespørsler. På server-siden har du valget mellom ASP.NET, PHP, Django, Ruby on Rails, Perl, JavaServer Pages ... du får ideen. Denne separasjonen av bekymringer gjør Knockout.js til et utrolig fleksibelt utviklingsverktøy for brukergrensesnitt.
Denne leksjonen representerer et kapittel fra Knockout Succinctly, en gratis eBok fra teamet på Syncfusion.
