Share
Per la maggior parte delle applicazioni Web, la raccolta di input dell'utente è relativamente inutile se non è possibile trasmettere tali dati a un server. In questa lezione, impareremo come inviare e ricevere informazioni da un server utilizzando le richieste AJAX. Questo mette il modello di nuovo nel modello di progettazione Model-View-ViewModel alla base di Knockout.js.
Figura 27: aggiunta del modello al modello MVVM Ricorda che Knockout.js è progettato per essere compatibile con qualsiasi altra tecnologia lato client o lato server. Questa serie usa jQuery $ GetJSON () e $ .post (), ma sei libero di utilizzare qualsiasi framework JavaScript che possa inviare e ricevere dati JSON. Allo stesso modo, il linguaggio di scripting lato server dipende completamente da te. Invece di presentare esempi di codice di back-end, questa lezione include semplicemente i dati JSON previsti da Knockout.js. Generare questo output dovrebbe essere banale da implementare in qualsiasi linguaggio di scripting moderno.
Utilizzeremo una nuova pagina HTML per sperimentare l'integrazione di Knockout.js / AJAX. Poiché questa pagina dovrà interagire con un certo codice lato server, assicurati che sia accessibile dalla radice del documento del tuo server locale. Iniziamo con qualcosa di simile alla lezione precedente:
Dati esterni
Questa è una forma base con pochi i campi in modo che possiamo vedere come inviare e ricevere informazioni dal server. Si noti che includiamo anche la libreria jQuery prima della nostra personalizzazione
Successivamente, sostituiremo completamente il nostro PersonViewModel. Al suo posto, useremo jQuery $ GetJSON () metodo per caricare alcuni dati iniziali dal server e lasciare che il plug-in di mappatura generi dinamicamente osservabili. Sostituisci l'intera custom
Quando viene caricata la nostra applicazione, effettua immediatamente una richiesta AJAX per i dati utente iniziali. Il tuo script sul lato server per / Get-intial-dati dovrebbe restituire la stessa cosa dell'uscita JSON di esempio dalla sezione Caricamento dati di questa lezione. Una volta caricati i dati, creiamo un ViewModel via ko.mapping.fromJS (). Questo prende l'oggetto JavaScript nativo generato dallo script e trasforma ogni proprietà in osservabile. A parte i metodi saveUserData () e loadUserData (), questo ViewModel generato dinamicamente ha la stessa identica funzionalità di PersonViewModel.
A questo punto, abbiamo solo inizializzato il nostro ViewModel con i dati dal server. Il plug-in di mappatura ci consente anche aggiornare un ViewModel esistente nello stesso modo. Andiamo avanti e aggiungere un esplicito loadUserData () ritorno al ViewModel:
Accentsconagua
viewModel.loadUserData = function () $ .getJSON ("/ get-user-data", function (data) ko.mapping.fromJS (data, viewModel);); Nella vecchia versione di loadUserData (), dovevamo assegnare manualmente ogni proprietà di dati al rispettivo osservabile. Ma ora, il Mappatura il plug-in fa tutto questo per noi. Si noti che il passaggio dell'oggetto dati come primo argomento a ko.mapping.fromJS () lo induce a aggiornare il ViewModel al posto di inizializzazione esso.
Il plug-in di mappatura si riferisce solo al caricamento dei dati, quindi saveUserData () rimane inalterato tranne per il fatto che deve essere assegnato all'oggetto viewModel:
viewModel.saveUserData = function () var data_to_send = userData: ko.toJSON (viewModel); $ .post ("/ save-user-data", data_to_send, function (data) alert ("I tuoi dati sono stati inviati al server!");); E ora dovremmo tornare a dove abbiamo iniziato all'inizio di questa sezione, entrambi i Caricare dati e Salvare i dati i pulsanti dovrebbero funzionare e Knockout.js dovrebbe mantenere la vista e ViewModel sincronizzati.
Pur non essendo un plug-in necessario per tutti i progetti Knockout.js, il Mappatura il plug-in rende possibile scalare oggetti complessi senza aggiungere una riga di codice aggiuntiva per ogni nuova proprietà aggiunta al ViewModel.
In questa lezione, abbiamo appreso come Knockout.js può comunicare con uno script sul lato server. La maggior parte delle funzionalità relative ad AJAX proviene dal framework web jQuery, sebbene Knockout.js fornisca una funzione di utilità ordinata per convertire i suoi osservabili in proprietà JavaScript native. Abbiamo anche discusso il plug-in di mappatura, che ha fornito un modo generico per convertire un oggetto JavaScript nativo in un ViewModel con proprietà osservabili.
Ricorda, Knockout.js è una pura libreria lato client. È solo per la connessione di oggetti JavaScript (ViewModels) con elementi HTML. Dopo aver impostato questa relazione, puoi utilizzare qualsiasi altra tecnologia che desideri comunicare con il server. Sul lato client, è possibile sostituire jQuery con Dojo, Prototype, MooTools o qualsiasi altro framework che supporti le richieste AJAX. Sul lato server, hai la scelta di ASP.NET, PHP, Django, Ruby on Rails, Perl, JavaServer Pages ... hai l'idea. Questa separazione delle preoccupazioni rende Knockout.js uno strumento di sviluppo dell'interfaccia utente incredibilmente flessibile.
Questa lezione rappresenta un capitolo da Knockout in modo succinto, un eBook gratuito dal team di Syncfusion.
