Immergersi in CanJS parte 2

Questa è la seconda parte di una serie in tre parti che ti insegnerà come creare un'applicazione di gestione contatti in JavaScript utilizzando CanJS e jQuery. Quando hai finito con questo tutorial, avrai tutto il necessario per creare le tue applicazioni JavaScript utilizzando CanJS!

Nella prima parte, sono stati creati i modelli, le viste e i controlli necessari per visualizzare i contatti e le apparecchiature utilizzate per simulare un servizio REST.

In questa parte, dovrai:

• Creare un controllo e una vista per visualizzare le categorie.
• Ascolta gli eventi usando un controllo.
• Usa il routing per filtrare i contatti.

Verrai aggiunto ai file di origine dalla prima parte, quindi se non lo hai già fatto, torna subito a leggere. Sarò qui quando sarai pronto.

Impostazione del routing

Il routing aiuta a gestire la cronologia del browser e lo stato del client nelle applicazioni JavaScript a pagina singola.

Il routing aiuta a gestire la cronologia del browser e lo stato del client nelle applicazioni JavaScript a pagina singola. L'hash nell'URL contiene proprietà che un'applicazione legge e scrive. Varie parti dell'app possono ascoltare queste modifiche e reagire di conseguenza, in genere aggiornando parti della pagina corrente senza caricarne una nuova.

can.route è un osservabile speciale che aggiorna e risponde ai cambiamenti in window.location.hash. Uso can.route per mappare gli URL alle proprietà, risultando in URL carini come #! / Filtro tutto. Se non sono definiti percorsi, il valore di hash viene semplicemente serializzato nella notazione con codifica URL come #! Category = tutto.

In questa applicazione, il routing verrà utilizzato per filtrare i contatti per categoria. Aggiungi il seguente codice al tuo contacts.js file:

 can.route ('filter /: category') can.route (", category: 'all')

La prima riga crea un percorso con a categoria proprietà che la tua applicazione sarà in grado di leggere e scrivere. La seconda riga crea una rotta predefinita, che imposta il categoria proprietà a tutti.

Lavorare con un elenco di istanze di modelli

UN Model.List è una matrice osservabile di istanze di modelli. Quando definisci a Modello piace Contatto, un Model.List per quel tipo di modello viene creato automaticamente. Possiamo estendere questo creato Model.List aggiungere funzioni di aiuto che operano su un elenco di istanze di modello.

Lista dei contatti avrà bisogno di due funzioni di supporto per filtrare un elenco di contatti e segnalare quanti contatti ci sono in ogni categoria. Aggiungi questo a contacts.js subito dopo il Contatto modello:

 Contact.List = can.Model.List (filter: function (category) this.attr ('length'); var contacts = new Contact.List ([]); this.each (function (contact, i)  if (category === 'all' || category === contact.attr ('category')) contacts.push (contact)) return contacts;, count: function (category) return this.filter (categoria) .lunghezza;);

Le due funzioni di supporto qui sono:

• filtro() scorre attraverso ciascun contatto nell'elenco e restituisce un nuovo Lista dei contatti di contatti all'interno di una categoria. this.attr ( 'lunghezza') è incluso qui, quindi EJS configurerà l'associazione live quando usiamo questo helper in una vista.
• contare() restituisce il numero di contatti in una categoria usando il filtro() funzione di aiuto. Per colpa di this.attr ( 'lunghezza') nel filtro(), EJS imposterà il live binding quando usiamo questo helper in una vista.

Se utilizzi un helper in EJS, utilizza attr () su una lista o su una proprietà di istanza per l'installazione di live binding.

Filtraggio dei contatti

Successivamente, modificherai il contactsList.ejs visualizzare per filtrare i contatti in base alla proprietà della categoria nell'hash. Nel contactsList.ejs visualizza, cambia il parametro passato a elenco() aiuto a contacts.filter (can.route.attr ( 'categoria')). Il file EJS dovrebbe apparire come questo quando hai finito:

 
 <% list(contacts.filter(can.route.attr('category')), function(contact) %> 
 el.data ('contact', contact)% >> 
 <%== can.view.render('contactView', contact: contact, categories: categories) %> 
 
 <% ) %> 

Sulla seconda riga, filtro() viene chiamato con la categoria corrente da can.route. Da quando hai usato attr () nel filtro() e via can.route, EJS imposterà il live binding per ri-renderizzare l'interfaccia utente quando uno di questi cambierà.

Ormai dovrebbe essere chiaro quanto sia potente il live binding. Con un leggero aggiustamento alla tua vista, l'interfaccia utente dell'app sarà ora completamente sincronizzata non solo con l'elenco dei contatti, ma anche con la proprietà della categoria definita nel percorso.

Visualizzazione delle categorie

I contatti vengono filtrati quando viene modificata la proprietà della categoria nell'hash. Ora hai bisogno di un modo per elencare tutte le categorie disponibili e modificare l'hash.

Innanzitutto, crea una nuova vista per visualizzare un elenco di categorie. Salva questo codice come filterView.ejs nel tuo visualizzazioni cartella:

 
 
categorie
 
 Tutti (<%= contacts.count('all') %>) 
 <% $.each(categories, function(i, category) %> 
 "><%= category.name %> (<%= contacts.count(category.data) %>) 
 <% ) %> 

Esaminiamo alcune righe di questo codice e vediamo cosa fanno:

 <% $.each(categories, function(i, category) %>

$ .Ogni scorre tra le categorie ed esegue una richiamata per ciascuna di esse.

 "><%= category.name %> (<%= contacts.count(category.data) %>

Ogni link ha un Dati-categoria attributo che verrà inserito nell'oggetto dati di jQuery. Successivamente, è possibile accedere a questo valore utilizzando .dati ( 'categoria') sul etichetta. Il nome della categoria e il numero di contatti saranno utilizzati come test di collegamento. L'associazione dal vivo è impostata sul numero di contatti perché contare() chiamate filtro() che contiene this.attr ( 'lunghezza').

Il controllo associa automaticamente metodi che sembrano gestori di eventi quando viene creata un'istanza. La prima parte del gestore eventi è il selettore e la seconda parte è l'evento che si desidera ascoltare. Il selettore può essere un qualsiasi selettore CSS valido e l'evento può essere qualsiasi evento DOM o evento personalizzato. Quindi una funzione come 'un clic' ascolterà un clic su qualsiasi tag all'interno dell'elemento del controllo.

 Filter = can.Control (init: function () var category = can.route.attr ('category') || "all"; this.element.html (can.view ('filterView', contacts: this .options.contacts, categories: this.options.categories)); this.element.find ('[data-category = "' + category + '"]'). parent (). addClass ('active'); , '[categoria dati] fa clic su': function (el, ev) this.element.find ('[categoria-dati]'). parent (). removeClass ('active'); el.parent (). addClass ('active'); can.route.attr ('category', el.data ('category')););

 this.element.html (can.view ('filterView', contacts: this.options.contacts, categories: this.options.categories));

 this.element.find ('[data-category = "' + category + '"]'). parent (). addClass ('active');

 '[categoria dati] clicca': function (el, ev) 

 . This.element.find ( '[data-categoria]') parent () removeClass ( 'attivo').; . El.parent () addClass ( 'attivo');

 can.route.attr ('category', el.data ('category'));

Aggiorna la proprietà della categoria in can.route utilizzando il valore dell'oggetto dati di jQuery per il quello è stato cliccato.

---

Inizializzazione del controllo filtro

Proprio come il Contatti Controllo nella prima parte, è necessario creare una nuova istanza di Filtro Controllo. Aggiorna la tua funzione pronta per il documento per assomigliare a questa:

 $ (document) .ready (function () $ .when (Category.findAll (), Contact.findAll ()). then (function (categoryResponse, contactResponse) var categories = categoryResponse [0], contacts = contactResponse [0] ] nuovi contatti ("# contatti", contatti: contatti, categorie: categorie); nuovo filtro ("filtro #", contatti: contatti, categorie: categorie););)

Con questa modifica, un'istanza di Filtro Il controllo verrà creato su #filtro elemento. Verrà passato l'elenco di contatti e categorie.

Ora, quando si esegue l'applicazione in un browser, sarà possibile filtrare i contatti facendo clic sulle categorie a destra:

---

Avvolgendo

Questo è tutto per la seconda parte! Ecco cosa abbiamo realizzato:

• Creato un controllo che ascolta gli eventi e gestisce le categorie
• Instradamento di installazione per filtrare i contatti per categoria
• Ottimizzato le tue visualizzazioni in modo che il live binding manterrà la tua intera interfaccia utente in sincronia con il tuo livello dati

Nella terza parte, aggiornerai i controlli esistenti per consentire la modifica e l'eliminazione dei contatti. Creerai anche un nuovo Controllo e Visualizza che ti consentirà di aggiungere nuovi contatti.

Non vedo l'ora di saperne di più? La terza parte della serie è stata pubblicata qui!