Costruisci un gestore di contatti usando Backbone.js Parte 1 / Codice

In questo tutorial, cercheremo di creare un gestore di contatti completamente funzionale utilizzando Backbone.js, Underscore.js e jQuery. Daremo un'occhiata ai componenti di base che rendono spunta Backbone e ad alcuni dei metodi di convenienza esposti da Underscore.

Che cosa sono esattamente tutte queste librerie?

Backbone è una struttura architettonica che ci consente di creare facilmente applicazioni JavaScript non banali mediante l'organizzazione e la struttura in stile MVC. Backbone non è considerato vero MVC - C è per Collection non Controller, ma offre ancora molti degli stessi vantaggi e ci consente di scrivere codice potente ma mantenibile.

Underscore è una libreria di utilità che fornisce funzionalità avanzate a JavaScript, aggiungendo funzioni aggiuntive per lavorare con array, collezioni, funzioni e oggetti.

Iniziare

Avremo bisogno di una cartella del progetto root contenente css, img e js sottocartelle, quindi vai avanti e creale ora. Iniziamo con la seguente pagina HTML:

Salva questo come index.html nella cartella del progetto root. L'unico requisito obbligatorio di Backbone è Underscore.js, ma vogliamo anche utilizzare jQuery per collegarci a queste due librerie prima di Backbone. Il codice dell'applicazione verrà inserito app.js e tutti gli stili andranno in screen.css. Nella pagina, abbiamo un contenitore vuoto che costituirà la base della nostra applicazione.

Successivamente possiamo creare il file JavaScript scheletrico che gradualmente riempiremo nel corso di questa serie. In un nuovo file aggiungi il seguente codice:

Salva questo nel js cartella come app.js. Inseriremo tutto il nostro codice in una funzione anonima che invochiamo immediatamente, aliasing jQuery come $ personaggio. Definito anche in questa fase è una matrice di oggetti in cui ogni oggetto rappresenta un contatto.

Utilizzeremo questo archivio dati locale per questa parte del tutorial in quanto ci consente di ottenere alcuni script attivi e funzionanti senza preoccuparci troppo della sincronizzazione con un server. Lo salveremo per un altro giorno!

Modelli

Un modello rappresenta i dati di un'applicazione; nella nostra applicazione questo sarà un contatto individuale, che avrà attributi come un nome, un numero di contatto, ecc. Si potrebbe dire che un singolo modello rappresenta la parte atomica dell'applicazione - la più piccola unità possibile di funzionalità. Aggiungi il seguente codice direttamente dopo l'array di dati:

Per creare un modello in Backbone, estendiamo semplicemente il Backbone.Model classe usando il estendere() metodo. Possiamo passare un oggetto nel metodo che ci consente di personalizzare il modello con le nostre funzionalità. Viene chiamata una delle proprietà che possiamo impostare all'interno di questo oggetto default. Questa proprietà ci consente di configurare i valori predefiniti per qualsiasi attributo che vorremmo avere i nostri modelli.

In questo caso, impostiamo un'immagine segnaposto come valore predefinito di foto attributo per le istanze del modello. A tutti i modelli che non hanno questo attributo una volta definito, gli verrà dato.

I modelli hanno altre proprietà che possiamo usare per aggiungere funzionalità; potremmo definire un inizializzare() metodo, e questo metodo sarebbe invocato automaticamente da Backbone per noi quando ogni modello è inizializzato. Al momento non ci serviremo di questo, ma non preoccupatevi, torneremo ai modelli un po 'più avanti.

collezioni

Una collezione è una classe per la gestione di gruppi di modelli. In questo esempio useremo un esempio semplice per memorizzare tutti i nostri contatti. Aggiungi il seguente codice direttamente dopo il Contatto modello:

Come un modello, una collezione è una classe Backbone che estendiamo per aggiungere funzionalità personalizzate specifiche per la nostra applicazione. Le collezioni hanno anche un estendere() metodo, e accetta un oggetto che ci permette di impostare le proprietà della classe e aggiungere comportamenti. Noi usiamo il modello proprietà per dire alla collezione da quale classe deve essere costruito ogni oggetto della collezione, che in questo caso è un'istanza della nostra Contatto modello. Non preoccuparti del fatto che le classi che abbiamo definito finora siano estremamente semplici, torneremo e aggiungeremo funzionalità aggiuntive nelle parti successive del tutorial.

Visualizzazioni

Le viste sono responsabili della visualizzazione dei dati dell'applicazione in una pagina HTML. Uno dei vantaggi di separare le parti dell'applicazione che elaborano i dati e le parti che visualizzano i dati è che possiamo facilmente apportare una modifica a una, senza richiedere modifiche estese all'altra. Useremo un paio di viste nella nostra applicazione, la prima delle quali dovrebbe essere aggiunta direttamente dopo elenco classe:

Questa vista gestisce la visualizzazione di un singolo contatto. Proprio come i modelli e le collezioni, le viste hanno un estendere() metodo utilizzato per estendere il Backbone.View classe. Impostiamo diverse proprietà di istanza nella nostra vista; il tagName la proprietà è usata per specificare il contenitore per la vista e il nome della classe proprietà specifica un nome di classe che viene aggiunto a questo contenitore. Useremo un semplice modello nel nostro file HTML per rendere ogni contatto, quindi il modello proprietà memorizza un riferimento memorizzato nella cache del modello, che selezioniamo dalla pagina usando jQuery.

Quindi definiamo a render () funzione; questa funzione non è invocata automaticamente da Backbone e mentre potremmo chiamarla dal richiamo automatico inizializzare() metodo per rendere la vista auto-rendering, non è necessario in questo caso.

All'interno del render () metodo memorizziamo un riferimento a Underscore modello() metodo e passare ad esso il modello memorizzato. Quando viene passato un singolo argomento contenente un modello Underscore non lo richiama immediatamente ma restituisce un metodo che può essere chiamato per rendere effettivamente il modello.

elemento creato dalla vista al modello interpolato usando jQuery html () metodo per convenienza. Questo viene fatto chiamando la funzione di template che Underscore ha restituito in precedenza e passandogli i dati da interpolare. I dati sono ottenuti dal modello usando Backbone toJSON () metodo sul modello. Interpolando significa semplicemente che i token all'interno del modello vengono sostituiti con dati reali. Si noti anche che noi usiamo $ EL per impostare il contenuto HTML; questo è un oggetto jQuery memorizzato nella cache che rappresenta l'elemento corrente in modo che non dobbiamo continuare a creare nuovi oggetti jQuery.

Alla fine di render () metodo, restituiamo il Questo oggetto, che punta all'istanza della vista che il render () il metodo è chiamato. Questo è così che possiamo collegare altri metodi Backbone all'istanza della vista dopo averla chiamata render () metodo.

Micro Templating With Underscore

Ora sarebbe probabilmente il momento giusto per esaminare le facitlità incorporate di micro-templating di Underscore. Underscore fornisce il modello() metodo come abbiamo visto consumare e interpolare i modelli. Alla pagina HTML dovremmo aggiungere il modello che useremo; aggiungi il seguente codice direttamente dopo il contenitore dei contatti

Noi usiamo a > elemento con un id attributo in modo che possiamo selezionarlo facilmente e un'abitudine genere attributo in modo che il browser non tenti di eseguirlo. All'interno del modello specifichiamo la struttura HTML che vorremmo usare e useremo token per specificare dove devono essere inseriti i dati del modello. Esistono un paio di altre funzionalità che possiamo utilizzare con Underscore, tra cui l'interpolazione di valori di escape HTML o l'esecuzione di JavaScript arbitrario, ma non è necessario utilizzarle per lo scopo di questo tutorial.

 
 Una vista principale
 Per completare questa parte del tutorial creeremo un'altra vista. La nostra vista corrente rappresenta ogni singolo contatto, quindi è mappato su un modello su base 1: 1. Ma questa visione non è auto-rendering e non l'abbiamo ancora invocata. Ciò di cui abbiamo bisogno è una vista che associa 1: 1 alla nostra collezione, una vista principale che renderà il giusto numero di viste di contatto per visualizzare ciascuno dei nostri contatti. Subito dopo il ContactView, aggiungi la seguente classe:
 var DirectoryView = Backbone.View.extend (el: $ ("# contacts"), initialize: function () this.collection = new Directory (contatti); this.render ();, render: function ()  var that = this; _.each (this.collection.models, function (item) that.renderContact (item); this);, renderContact: function (item) var contactView = new ContactView (modello: item); this. $ el.append (contactView.render (). el););
 Questa vista sarà allegata a un elemento già esistente nella pagina, il contenitore vuoto che è hardcoded nel file , quindi selezioniamo l'elemento con jQuery e lo impostiamo come EL proprietà. Quando poi definisci un semplice inizializzare() funzione che crea un'istanza della nostra classe di raccolta e quindi chiama la sua render () metodo, rendendo questa vista auto-rendering.
 Quindi definiamo il render () metodo per la nostra vista principale. All'interno della funzione, memorizziamo un riferimento alla vista in modo che possiamo accedervi con una funzione di callback, e quindi usare Underscore's ogni() metodo per iterare su ciascun modello della nostra collezione.
 Questo metodo accetta due argomenti (in questa forma, sebbene possa essere utilizzato anche con un solo argomento); il primo è la raccolta di elementi da iterare su, il secondo è una funzione anonima da eseguire per ciascun elemento. Questa funzione di callback accetta l'argomento corrente come argomento. Tutto ciò che facciamo all'interno di questa funzione di callback è chiamare il renderContact () metodo e passare ad esso l'elemento corrente.
 Infine definiamo il renderContact () metodo. In questo metodo creiamo una nuova istanza del nostro ContactView classe (ricorda, il ContactView classe rappresenta un contatto individuale) e impostare il suo modello proprietà all'elemento passato nel metodo. Quindi aggiungiamo l'elemento creato chiamando la vista render () metodo per il $ EL proprietà del DirectoryView vista principale (il contenitore vuoto che abbiamo selezionato dalla pagina). Il $ EL proprietà è un oggetto jQuery memorizzato nella cache che Backbone crea automaticamente per noi.
 La vista principale è responsabile della generazione di ogni singolo modello all'interno della nostra collezione. Tutto ciò che dobbiamo fare è inizializzare la nostra vista principale, e poiché si tratta di auto-rendering, mostrerà tutti i contatti specificati nella matrice di dati fittizi:
 var directory = new DirectoryView ();
 Quando eseguiamo questa pagina in un browser ora, dovremmo vedere una rappresentazione visiva dei nostri dati:
  Backbone crea un'istanza di un modello per ciascun elemento nel nostro array originale, che sono memorizzati nella nostra collezione e resi come istanza di una vista.
 Questo tutorial non riguarda il CSS, quindi non ho affatto trattato l'esempio di CSS. È solo CSS di base, se sei curioso dai un'occhiata al foglio di stile incluso nell'archivio demo.
 
 Sommario
 In questa parte del tutorial sono stati introdotti alcuni dei componenti principali di Backbone.js; modelli, collezioni e viste. I modelli sono classi che possiamo creare per archiviare dati su una cosa particolare e definirne il comportamento. Le raccolte sono utilizzate per gestire gruppi di modelli e viste ci consentono di rendere i nostri modelli utilizzando modelli interpolati che visualizzano i dati dai nostri modelli.
 Nella prossima parte del tutorial daremo un'occhiata a come possiamo filtrare la nostra collezione per mostrare solo un sottoinsieme dei nostri modelli. Daremo anche un'occhiata a un altro importante componente di Backbone - Routers.



		
			
	   
	




Codice