Per la maggior parte delle applicazioni web, il fatto di poter raccogliere l'input dell'utente tramite i moduli è la loro funzione principale, ma questa può essere tralasciata se l'applicazione in quanto tale non può inviare o ricevere i dati al server.
Ecco perché esistono linguaggi lato server o l'elaborazione di a JSON per aiutarci in questo compito, dove ai fini di questo tutorial useremo jQuery come framework JavaScript per eseguire l'elaborazione di un JSON, che servirà a sostituire il linguaggio lato server e ci fornirà l'input dei dati da elaborare nel nostro modello.
Requisiti
Avremo bisogno di Knockout.js nel nostro sistema e accessibile per le applicazioni che creeremo, abbiamo anche bisogno jQuery che possiamo usare localmente o dal tuo CDN. Permessi per scrivere file, una connessione Internet per ottenere le librerie se non le abbiamo e un editor di testo come Testo sublime o Blocco note ++. Per eseguire le applicazioni abbiamo bisogno di un tipo di server web Apache o Nginx nel nostro ambiente di test.
Inizieremo a lavorare direttamente sull'applicazione e non approfondiremo alcuni dei concetti utilizzati negli esempi, quindi consigliamo di fare una passeggiata attraverso i tutorial che comportano modifiche dinamiche, gestione dei moduli e, naturalmente, associazioni con Knockout.js.
Lettura di dati esterni
Creeremo un semplice documento HTML che includerà la libreria di Knockout.js così come jQuery. Creeremo il nostro modulo senza dimenticare di fare il attacchi degli elementi in esso e infine nella logica per il nostro Visualizza modello Creeremo la funzione per gestire le modifiche nel nostro form con gli osservabili, vediamo il codice per il nostro HTML:
Dati esterniCome si vede abbiamo un documento HTML Semplice con pochi elementi, composti da due campi di testo e un elenco di selezione, e se siamo osservatori possiamo vedere che i nostri osservabili sono ugualmente vuoti, per finire vediamo come appare la nostra forma iniziale:Nome e cognome:
Cognome:
Attività preferite:Carica dati
Poiché abbiamo il nostro modulo, dobbiamo dare un senso al nostro esempio ed è per poter caricare dati esterni nella nostra applicazione, ecco perché i nostri osservabili sono vuoti. Usiamo il metodo jQuery chiamato $ .getJSON () che riceve a JSON Come input, nel caso stessimo lavorando con un linguaggio lato server, dobbiamo specificare il percorso del file che lo genererà come output come segue:
self.loadUserData = function () {$ .getJSON ("/ get-user-data", function (data) {alert (data.name);}); }Per non complicare le cose useremo a JSON già generato all'interno della nostra applicazione, per questo ne creiamo uno con la seguente struttura che può variare i suoi valori se lo desiderano:
{"nome": "Nome", "cognome": "Cognome", "attività": ["Bicicletta", "Videogiochi", "Sviluppo web"], "hobby": "Leggere"}Ora possiamo cambiare la nostra funzione precedente e inviargli come parametro il nome del nostro file JSON, vediamo:
self.loadUserData = function () {$ .getJSON ("user_information.json", funzione (data) {avviso (data.name);}); }Includendo questa funzione nel nostro codice possiamo verificare come funziona il nostro metodo $ .getJSON () e ottenere così uno dei valori al suo interno, la risposta della nostra applicazione quando si preme il pulsante Carica i dati, mostrerà semplicemente il nome.
Come vediamo il nostro metodo funziona perfettamente, ora non ci resta che dopo aver ottenuto i valori del nostro JSON è includere la funzione all'interno del nostro Visualizza modello e facciamo la corrispondenza con gli identificatori del nostro form, vediamo come si presenta il nostro codice finale:
function UserViewModel() {var self = this; self.name = ko.osservabile (""); self.cognome = ko.osservabile (""); self.activities = ko.observableArray ([]); self.hobbies = ko.osservabile (""); 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 (nuovo UserViewModel ());Ora non ci resta che eseguire il nostro esempio nel browser e premere il pulsante Carica dati che deve compilare immediatamente i campi del nostro modulo con i valori del JSON, vediamo:
Come possiamo vedere, ha funzionato perfettamente e siamo stati in grado di leggere dati esterni in poche semplici righe di codice. Questo è abbastanza utile in termini di usabilità e funzionalità della nostra applicazione, ma possiamo fare qualcosa in più, possiamo memorizzare i dati in un JSON e quindi estendere le funzionalità della nostra applicazione.
Memorizzazione dei dati
Per le applicazioni web convenzionali, memorizzare i dati in formato JSON è semplice come convertire oggetti in quel formato e inviarli al server, ma nel caso di applicazioni che utilizzano Knockout.js la questione è un po' più complicata in quanto Visualizza modello utilizzare gli osservabili invece delle normali proprietà JavaScript, poiché gli osservabili sono funzioni e il tentativo di serializzarli e inviarli al server può portare a risultati imprevisti.
ko.toJSON ()Per questi casi siamo fortunati, poiché Knockout.js fornisce una soluzione semplice ed efficace, la funzione ko.toJSON (), che sostituisce tutte le proprietà degli oggetti osservabili con il loro valore corrente e restituisce il risultato come una stringa nel formato JSON.
Per implementare questa nuova funzionalità nella nostra applicazione creeremo un nuovo pulsante nel nostro modulo chiamato Salvare i dati e la nostra funzione sarà legata salvare i datiVediamo come appare il nostro codice con le modifiche:
Dati esterniSe eseguiamo il nostro esempio nel browser vediamo come abbiamo un nuovo pulsante, carichiamo i nostri valori, che se vogliamo possiamo modificarli. Infine premiamo il pulsante corrispondente che dovrebbe mostrarci i valori nel nostro modulo come una stringa in formato JSON, vediamo come si presenta:Nome e cognome:
Cognome:
Attività preferite:Carica dati
Salvare i dati
INGRANDIRE
Infine, se vogliamo che questi dati vengano inviati a uno script sul nostro server, dobbiamo solo apportare alcune modifiche alla nostra funzione appena creata e quando si utilizza il metodo $ .post completiamo il processo, per finire vediamo come si presenta:
self.gsaveData = function () {var data_submit = {userData: ko.toJSON (self)}; $ .post ("/ save-data", data_send, function (data) {alert ("L'informazione è stata inviata al server");}); }
Mappatura dei dati per visualizzare i modelli
Il modo in cui gestiamo le nostre informazioni da un JSON è tutto ciò di cui abbiamo bisogno per creare applicazioni robuste e implementare qualsiasi tipo di soluzione indipendente dal linguaggio lato server, purché gestita con JSON.
Ma possiamo andare un po' oltre e mappare automaticamente i dati JSON dal server al nostro Visualizza modello e possiamo raggiungere questo obiettivo con un plug-in per Knockout.js chiamata mappatura ad eliminazione diretta. Per iniziare ad usarlo, dobbiamo prima scaricarlo dal suo repository su GitHub, decomprimerlo all'interno del nostro progetto e includerlo dopo il nostro framework per evitare errori dovuti alla mancanza di dipendenze.
Ora non ci resta che modificare il nostro codice e rimuovere il nostro pulsante Caricamento dati, così come tutta la logica di Knockout.js, poiché grazie al nostro plug-in ottenere le informazioni sarà molto più semplice, vediamo il nostro codice finale:
Dati esterniCome possiamo vedere, la nostra logica è stata ridotta a sole tre righe di codice, ciò che fa è quando la nostra applicazione viene caricata, fa immediatamente una richiesta Ajax del JSON che deve corrispondere agli elementi della nostra forma. Questo prende gli oggetti nativi di JavaScript e trasforma ogni proprietà in un osservabile, evitando tutte quelle righe di codice e rendendo non solo la nostra applicazione più robusta ma anche il nostro codice più leggibile.Nome e cognome:
Cognome:
Attività preferite:
Per finire, se eseguiamo la nostra applicazione, vediamo come automaticamente i nostri valori vengono caricati nel nostro modulo e possiamo vedere la richiesta Ajax insieme alla risposta JSON se utilizziamo la console del browser:
Ecco come abbiamo terminato questo tutorial, dove abbiamo potuto vedere come Knockout.js ci offre un modo per inviare e archiviare dati indipendentemente dalla lingua lato server utilizzata, questo ci dà una maggiore libertà nella nostra implementazione cambiando solo la lingua del server in PHP, Ruby o Python per dirne alcuni.
