Inizia con Knockout.js

Il trasferimento della parte più difficile dell'applicazione lato client sta diventando sempre più comune, relegando così i linguaggi server ad essere solo quelli che gestiscono la persistenza attraverso i servizi RIPOSO.
Parte della responsabilità che tutto ciò accada ricade sui nuovi modi di lavorare con JavaScript e la generazione di interfacce utente dinamiche e responsive, grazie alle diverse quadri esistente.
Questo framework ha molti punti di forza come il suo peso ridotto e la sua documentazione, oltre al fatto che è sul mercato da molto tempo, quindi sta maturando costantemente per poter essere applicato negli ambienti di produzione.
1- Come la maggior parte delle librerie e dei framework di JavaScript i requisiti non sono così impegnativi, in questo caso avremo bisogno di un piccolo server web per elaborare al meglio le nostre richieste, può essere Wamp in finestre o un'istanza di Apache in Linux o Mac.
2- Abbiamo bisogno di un editor di testo RTF nello stile di Testo sublime o Blocco note ++ essere in grado di scrivere il codice necessario per soddisfare gli esempi e gli esercizi che mostreremo.
3- Infine abbiamo bisogno dell'accesso a Internet per poter scaricare Knockout.js ancora una volta.
Il processo di installazione è abbastanza semplice e non dipende da una piattaforma specifica, il processo sarà lo stesso se siamo dentro Windows, Linux o MAC.
La prima cosa che dobbiamo fare è scaricare Knockout.js dalla sua pagina ufficiale, per questo possiamo andare sul sito del progetto e nella sezione di download facciamo clic con il tasto destro e selezioniamo l'opzione Salvare il link come:

INGRANDIRE

È importante salvare il file in una cartella pertinente al nostro progetto per includerlo. Può anche essere installato utilizzando Bower o anche usarlo da uno qualsiasi dei CDN servizi in modo da non dover utilizzare il nostro server come repository di librerie.
Una volta che abbiamo il file, dobbiamo semplicemente includerlo in un file HTML come segue:

 Installazione di Knockout.js 

Come possiamo vedere, dovevamo solo includere il file scaricato tramite un tag di script. Nel caso in cui vogliamo lavorare con la versione del CDN Dobbiamo solo cambiare il percorso locale al percorso Internet del file, questo è molto simile a lavorare con librerie come jQuery o quadri come AngularJS.
Visualizza modello Visualizza modelloIl titolo di questa sezione può sembrare un errore, come è possibile parlare di Model View View Model? Non é la stessa cosa? Si scopre che Tramortire ha un modello di progettazione o un paradigma di sviluppo da cui trae ispirazione MVC, dove certamente il Modello e il Visualizzazione si comportano come quello che sappiamo dall'approccio "classico", tuttavia abbiamo un nuovo livello chiamato Visualizza modello che ha il compito di unire e dare funzionalità alle nostre opinioni.
Associazione dati è la caratteristica principale del nostro quadro che ci permette di indicare al documento HTML quali sono gli elementi a cui devi dare accesso Knockout.js, anche se suona come qualcosa di complesso, possiamo riassumerlo come qualcosa di più semplice, è la semplice applicazione di proprietà agli elementi dell'albero SOLE dove vogliamo che abbia prestazioni Knockout.js.
Vediamo il seguente codice di esempio, diciamo di voler stampare un nome dal nostro Visualizza modello su un'etichetta all'interno del corpo, per questo dobbiamo solo fare quanto segue:

 Installazione di Knockout.js 

Lo vediamo all'interno della nostra etichetta h1 c'è un tag span e il tag span ha una proprietà che non è nativa di HTML qual è la proprietà? associazione dati, questo è ciò che ci fa connettere Knockout.js con il nostro albero DOM in questo caso abbiamo semplicemente indicato che la proprietà o il nome della variabile deve essere preso dal nostro Visualizza modello.
Se eseguiamo il nostro esempio nel browser otterremo un risultato come quello che possiamo vedere nell'immagine seguente:

Con questo abbiamo già realizzato la nostra prima applicazione utilizzando Knockout.js.
Ormai dobbiamo aver capito che la filosofia Visualizza modello è una parte importante del lavoro in Knockout.js, ecco perché continueremo ad approfondire l'argomento.
Creazione di VistaModelCi sono due modi per creare una Vista Modello, la forma base e quella orientata agli oggetti, quella che usiamo dipende già dal nostro modo di sviluppare, anche se quella consigliata è orientato agli oggetti poiché sebbene all'inizio sia più complesso, ci consente di ottenere un ordine migliore nella nostra applicazione.
Per creare un Visualizza modello di base dobbiamo solo fare qualcosa come il seguente:

 var myModelView = {nome: 'Pedro Perez'};

Per come la vediamo noi, non è affatto complesso, definiamo semplicemente una variabile e inseriamo un contenuto di stile su di essa. JSON.
Ora il modo orientato agli oggetti ci permette di creare metodi di accesso e manipolazione delle proprietà che vogliamo inserire nel nostro Visualizza modello, per questo possiamo fare qualcosa del genere:

 var myOOOOOOOFModelView = function () {var self = this; self.name = 'Jonathan'; self.lastname = 'Acosta'; self.getName = function () {return self.name + '' + self.cognome; };};

Se vogliamo in questo caso possiamo accedere direttamente al nome o cognome singolarmente, oppure utilizzare il metodo getNome() che ci dà il nome e cognome uniti o concatenati.
Qui molti potrebbero chiedersi se non fosse più facile fare un assolo Corda Con il nome e cognome, la risposta è molto semplice, più opzioni abbiamo, più semplice sarà l'applicazione a nostro avviso, immagina che volessimo solo il nome, con la forma base avremmo dovuto elaborare la stringa per essere in grado di separarli, nel cambiamento orientato agli oggetti accediamo solo alla proprietà che ci interessa.
Finora quello che abbiamo visto è molto statico, e se ora iniziassimo a usare i parametri, in questo modo a Visualizza modello Può servire a molti scopi, poiché non ci limiteremo a ciò che stabiliamo, ma possiamo modificare i dati in base alla situazione.
Riscriviamo la nostra forma orientato agli oggetti, e utilizzeremo il seguente modulo:

 var myOOOOOOOFModelView = funzione (nome, cognome) {var self = questo; self.name = nome; self.cognome = cognome; self.getName = function() {return self.name + '' + self.cognome; };};

Come abbiamo potuto vedere è stato molto facile implementare l'uso dei parametri, ora lo implementeremo nel nostro primo esempio e quindi vedremo come tutto si adatta al suo posto, per questo useremo il seguente codice HTML:

 Installazione di Knockout.js 

Qui la prima cosa che notiamo è che il associazione dati non è più testo come nell'esempio iniziale se no usiamo html, questo ci permette di inviare etichette html e poter così dare più stile alla nostra risposta dal Visualizza modello.
Già nella sezione dove definiamo il nostro Visualizza modello vediamo che prima di applicare il legame di Knockout.js, creiamo un'istanza del nostro ViewModel orientato agli oggetti, È a questo punto che possiamo dare i valori ai nostri parametri o proprietà, come possiamo vedere abbiamo mantenuto la nostra separazione di nome e cognome ma alla fine possiamo usare il metodo che li concatena.
Quando eseguiamo il nostro esempio, ci dà i seguenti risultati nel browser:

Ci sarà chi si chiederà cosa abbia questo quadro che già non offre AngularJS o Backbone.js, e hanno ragione nelle loro domande, tuttavia la risposta che diamo loro è che è solo un'opzione in più che possono avere a loro disposizione, ha i suoi punti di forza come una buona documentazione e il basso peso della sua implementazione (solo circa 20 kb), Ma come tutto, ognuno è libero di scegliere lo strumento che gli consente di raggiungere i propri obiettivi e che meglio si adatta alle esigenze del momento.
Con questo finiamo il nostro tutorial, abbiamo mosso con successo i nostri primi passi con Knockout.js, con questo possiamo iniziare a pensare a tutte le possibilità che questo framework di sviluppo di applicazioni ci offre con logica lato client.