Immergersi in CanJS parte 3

Questa è la parte finale di un tutorial 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 seconda parte, sono state create le viste e i controlli necessari per visualizzare le categorie, gli helper Model.List creati, l'instradamento utilizzato per filtrare i contatti e modificato l'EJS per sfruttare l'associazione dal vivo.

In questa parte del tutorial, dovrai:

Modifica ed elimina i contatti usando il Contatto Controllo
Crea un controllo e una vista per creare contatti
Ascolta gli eventi DOM e Model utilizzando i gestori di eventi di Templated di Control

Verrai aggiunto ai file di origine dalla prima e dalla seconda parte, quindi se non lo hai già fatto, rileggi leggendo la prima e la seconda parte.

Aggiornamento di un contatto

Nella prima parte, contactView.ejs posizionata ogni proprietà di un contatto in un tag di input. Per aggiornare un contatto quando questi input cambiano, dovrai aggiungere alcuni gestori di eventi al Contatto Controllo. Aggiungi questo codice contacts.js dentro il Contatti Controllo:

 '.contact input focusout': function (el, ev) this.updateContact (el); , '.contact input keyup': function (el, ev) if (ev.keyCode == 13) el.trigger ('blur'), '.contact select change': function (el, ev) this.updateContact (el), updateContact: function (el) var contact = el.closest ('. contact'). data ('contact'); contact.attr (el.attr ('name'), el.val ()). save ();

Passiamo attraverso questo codice riga per riga e vediamo come funziona:

 '.contact input focusout': function (el, ev) this.updateContact (el); ,

chiamate updateContact () quando c'è ne perde concentrazione.

 '.contact input keyup': function (el, ev) if (ev.keyCode == 13) el.trigger ('blur')

Attiva il sfocatura evento su un se si preme il tasto Invio mentre è attivo. Ciò farà sì che l'input perda messa a fuoco, che viene gestita dal focusOut gestore di eventi.

 '.contact select change': function (el, ev) this.updateContact (el),

chiamate updateContact () quando il valore del corrisponde a una proprietà di contatto, quindi el.attr ( 'name') restituirà il nome della proprietà che si sta aggiornando. salvare() è usato per salvare la modifica al Contatto Modello.

Eliminazione di un contatto

C'è un piccolo link con una "X" nell'angolo in alto a destra di ogni contatto. Quando si fa clic su questo, il contatto dovrebbe essere cancellato. Per fare ciò, aggiungi un altro gestore di eventi al Contatti controllo che assomiglia a questo:

 '.remove click': function (el, ev) el.closest ('. contact'). data ('contact'). destroy ();

Quando il X viene cliccato, l'istanza del contatto viene recuperata dal più vicino

e distruggere() è chiamato. distruggere() elimina il contatto dal modello e lo rimuove da qualsiasi elenco modelli.

L'associazione dal vivo aggiornerà automaticamente l'interfaccia utente quando un contatto viene eliminato.

Creare un contatto

Ora creerai il controllo e la vista necessari per creare un contatto. Innanzitutto avrai bisogno di un pulsante "Nuovo contatto" gigante. Aggiungi questo codice a index.html proprio sopra

   Nuovo contatto

Dovrai anche creare una nuova vista che renderà un modulo per la creazione di un contatto. Salva questo codice come createView.ejs nella tua cartella visualizzazioni:

  <%== can.view.render('views/contactView.ejs',  contact: contact, categories: categories ) %>   Salva cancella

Questa vista rende il contactView.ejs sotto-modello e aggiunge i pulsanti "Salva" e "Annulla". Ecco come appare nell'applicazione:

Ora dovrai creare un nuovo controllo chiamato Creare che visualizzerà il modulo e salverà il nuovo contatto nel Contatto Modello. Aggiungi questo codice a contacts.js:

 Create = can.Control (show: function () this.contact = new Contact (); this.element.html (can.view ('views / createView.ejs', contact: this.contact, categories: this .options.categories)); this.element.slideDown (200);, hide: function () this.element.slideUp (200);, '.contact input keyup': function (el, ev)  if (ev.keyCode == 13) this.createContact (el);, '.save click': function (el) this.createContact (el), '.cancel click': function () this .hide ();, createContact: function () var form = this.element.find ('form'); values = can.deparam (form.serialize ()); if (values.name! == "" ) this.contact.attr (values) .save (); this.hide (););

Esaminiamo questo Controllo in dettaglio per vedere cosa sta succedendo:

 show: function () this.contact = new Contact (); this.element.html (can.view ('views / createView.ejs', contact: this.contact, categories: this.options.categories)); this.element.slideDown (200); ,

Crea un contatto vuoto usando nuovo contatto() e lo assegna a this.contact. Il nuovo contatto è passato a posso vedere() insieme alle categorie da rendere.

 hide: function () this.element.slideUp (200); ,

Fa scorrere il modulo fuori dalla vista.

 '.contact input keyup': function (el, ev) if (ev.keyCode == 13) this.createContact (el);

chiamate createContact () se si preme il tasto Invio mentre si trova in uno degli ingressi.

 '.save click': function (el) this.createContact (el),

Chiamata createContact () quando viene cliccato il pulsante "Salva".

 '.cancel click': function () this.hide (); ,

chiamate nascondere() quando si fa clic sul pulsante "Annulla".

 var form = this.element.find ('form'); values = can.deparam (form.serialize ());

Trova il

elemento e utilizza jQuery serialize () funzione per ottenere una stringa che rappresenta tutti i valori del modulo. Quindi la stringa serializzata viene convertita in un oggetto usando can.deparam ().

 if (values.name! == "") this.contact.attr (values) .save (); this.hide ();

Se il nome del contatto non è vuoto, attr () è usato per aggiornare il contatto archiviato in this.contact. salvare() è chiamato per salvare le modifiche al modello e il modulo è nascosto chiamando nascondere().

Utilizzo di gestori di eventi templati

I controlli supportano anche gestori di eventi basati su modelli che consentono di personalizzare un gestore di eventi e di ascoltare eventi su oggetti diversi da this.element.

Personalizzi il comportamento del gestore usando NOME nel gestore dell'evento. La variabile all'interno delle parentesi graffe viene cercata sui Control this.options prima, e poi il finestra. È possibile creare più istanze dello stesso controllo, ma personalizzare il comportamento dei gestori di eventi in ogni istanza.

I controlli possono anche legarsi a oggetti diversi da this.element utilizzando gestori di eventi basati su modelli. Se la variabile all'interno NOME è un oggetto, il controllo si collegherà a quell'oggetto per ascoltare gli eventi. L'oggetto non deve essere un elemento DOM, può essere qualsiasi oggetto come un modello. Per ascoltare un clic in qualsiasi punto della pagina, devi utilizzare: 'document click'. come gestore dell'evento.

Questi gestori verranno ripuliti quando l'istanza di controllo viene distrutta. Questo è fondamentale per evitare perdite di memoria che sono comuni nelle applicazioni JavaScript.

Mostrando la forma

Dovrai utilizzare un gestore di eventi basato su modelli per mostrare il modulo quando viene fatto clic sul pulsante "Nuovo contatto". Aggiungi questo gestore di eventi al Creare Controllo in contacts.js:

 'document # new-contact click': function () this.show ();

Il pulsante "Nuovo contatto" è al di fuori del Creare Elemento di controllo, quindi 'document # new-contact' è usato come selettore per il pulsante. Quando viene fatto clic, il modulo scorrerà verso il basso in vista.

Inizializzazione del controllo di creazione

Proprio come gli altri Control presenti nell'applicazione, dovrai creare una nuova istanza di Creare Controllo. Aggiorna la tua funzione pronta per il documento in contacts.js per assomigliare a questo:

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

Con questa modifica, un'istanza di Creare Il controllo verrà creato su #creare elemento. Verrà passato l'elenco delle categorie.

Reagire a un nuovo contatto

Quando viene creato un nuovo contatto, il Model.List immagazzinato nel Contatti Il controllo deve essere aggiornato. Lo fai usando gestori di eventi basati su modelli. Aggiungi questo gestore di eventi al Contatti Controllo in contacts.js:

 'Contatto creato': function (list, ev, contact) this.options.contacts.push (contact);

Questo si lega al creato evento del Contatto Modello. Il nuovo contatto è aggiunto al Model.List immagazzinato nel Contatti Controllo usando Spingere().

L'associazione dal vivo aggiornerà automaticamente l'interfaccia utente delle applicazioni quando viene aggiunto il contatto this.options.contacts.

Avvolgendo

Questo è tutto per la parte finale di questo tutorial. Nella terza parte tu:

Gestori di eventi usati in un controllo per creare un nuovo contatto
Creata una vista che rende un modulo di creazione
Gestori di eventi templati usati in un controllo per eseguire il binding su oggetti diversi dall'elemento di Control

Questa è la fine del tutorial del gestore contatti di CanJS. Ecco un riepilogo di ciò che è stato trattato in questo tutorial in tre parti:

Creazione di controlli per gestire la logica dell'applicazione
Rendering di parti di un'applicazione con Views
Rappresentare il livello dati di un'applicazione utilizzando Modelli
Simulazione di un servizio REST con fixture
Utilizzo di live binding per mantenere l'interfaccia utente di un'applicazione in sincronia con il suo livello dati
Ascoltare gli eventi con i gestori di eventi di Control
Lavorare con elenchi di istanze di modelli mediante Model.List

Ora hai tutto il necessario per creare applicazioni JavaScript utilizzando CanJS. Vai a costruire qualcosa di fantastico.

Per la documentazione completa e altre app di esempio, visita CanJS. Grazie per aver letto!

Codice

Immergersi in CanJS

Immergersi in CanJS parte 2