Share
Se non hai sentito, c'è un nuovo ragazzo in città: CanJS. Quale modo migliore per approfondire ciò che offre questo nuovo framework rispetto alla creazione di un'applicazione di gestione contatti? Quando hai finito con questa serie in tre parti, avrai tutti gli strumenti necessari per creare le tue applicazioni JavaScript!
Costruire un'applicazione JavaScript senza gli strumenti giusti è difficile. Mentre jQuery è eccezionale in ciò che fa, una libreria di manipolazione DOM non fornisce alcuna infrastruttura per la creazione di applicazioni. Questo è specificamente il motivo per cui è necessario utilizzare una libreria, come CanJS.
CanJS è una libreria MVC leggera che ti offre gli strumenti necessari per creare app JavaScript.
CanJS è una libreria MVC leggera che ti offre gli strumenti necessari per creare app JavaScript. Fornisce tutta la struttura del pattern MVC (Model-View-Control), i modelli con binding live, supporto di routing e memoria sicura. Supporta jQuery, Zepto, Mootools, YUI, Dojo e ha un ricco set di estensioni e plugin.
Nella prima parte, dovrai:
Eccitato? Tu dovresti essere! Ora prendiamo il codice.
Dovrai creare una cartella per la tua applicazione. All'interno di questa cartella sono necessarie quattro sottocartelle: css, js, visualizzazioni e img. La tua struttura di cartelle dovrebbe apparire così quando hai finito:
Salva questo come index.html:
Responsabile contatti CanJS Responsabile contatti
Nella parte inferiore della pagina, vengono caricati jQuery, CanJS, il plug-in fixture e il codice dell'applicazione (contacts.js).
Il CSS e le immagini per questo tutorial sono inclusi nei file sorgente, che possono essere scaricati sopra.
Le viste sono modelli lato client utilizzati per eseguire il rendering di parti della tua app. CanJS supporta più linguaggi di template, ma questo tutorial utilizzerà EJS (Embedded JavaScript), che è confezionato con CanJS e supporta l'associazione live.
I modelli EJS sembrano HTML ma con etichette magiche in cui si desidera un comportamento dinamico (utilizzando JavaScript). Esistono tre tipi di tag magic in EJS:
Accentsconagua
I modelli possono essere caricati da un file o tag di script. In questo tutorial i modelli verranno caricati dai file EJS.
Per eseguire il rendering dei contatti, è necessario un modello EJS. Salva il seguente codice come contactsList.ejs nella cartella delle visualizzazioni:
contactLists.ejs renderà una lista di contatti. Esaminiamo il codice del modello qui più in dettaglio:
<% list(contacts, function(contact) %>
L'EJS elenco() l'helper richiama una funzione di callback su ciascun contatto nell'elenco. Se utilizzato con un elenco osservabile, il elenco() l'helper utilizzerà il live binding per ri-eseguire ogni volta che cambia la lunghezza dell'elenco.
Il codice sopra utilizza un callback di elemento per aggiungere l'istanza di contatto ai dati del . Tutto ciò che segue la freccia è avvolto in una funzione che verrà eseguita con EL impostato sull'elemento corrente.
<%== can.view.render('views/contactView.ejs', contact: contact, categories: categories ) %> Questo codice rende il contactView.ejs sotto-modello per ogni contatto. can.view.render () prende un modello e dati come parametri e restituisce HTML.
I sottotagili sono un ottimo modo per organizzare le tue viste in blocchi gestibili. Aiutano anche a semplificare i tuoi modelli e promuovono DRY (Do not Repeat Yourself). Più avanti in questo tutorial, riutilizzerai questo modello per creare contatti. Salva questo codice come contactView.ejs nella tua cartella visualizzazioni:
Ogni proprietà di un contatto viene inserita in un etichetta. Questi verranno utilizzati per aggiungere e aggiornare le informazioni di un contatto.
Ogni volta che EJS incontra attr () durante l'elaborazione di un modello, sa che il codice circostante deve essere trasformato in un gestore di eventi associato alle modifiche di quella proprietà. Quando la proprietà viene modificata altrove nell'app, il gestore eventi viene attivato e l'interfaccia utente verrà aggiornata. Si parla di live binding. EJS Live binding è opt-in. Si accende solo se usi attr () per accedere alle proprietà.
Diamo un'occhiata a uno dei tag dal contactView.ejs per vedere come funziona:
>
Il codice nei tag magic diventerà un gestore di eventi associato alla proprietà del nome del contatto. Quando aggiorniamo la proprietà name, viene eseguito il gestore eventi e l'HTML verrà aggiornato.
can.Control can.Control crea un controllo statico, organizzato e privo di memoria, che può essere utilizzato per creare widget o organizzare la logica dell'applicazione. Crea un'istanza di un controllo su un elemento DOM e passa i dati di cui avrà bisogno il controllo. Puoi definire qualsiasi numero di funzioni nel tuo Controllo e associare agli eventi.
Quando l'elemento a cui il tuo controllo è vincolato viene rimosso dal DOM, il controllo distrugge se stesso, eliminando eventuali gestori di eventi associati.
Per creare un nuovo controllo, estendere can.Control () passandogli un oggetto contenente le funzioni che desideri definire. Nella seconda parte verranno inoltrati anche i gestori di eventi.
Esistono alcune variabili e funzioni importanti presenti in ogni istanza di Control:
Questo - Un riferimento all'istanza di controllothis.element - L'elemento DOM su cui hai creato l'istanzathis.options - Un oggetto contenente dati passati all'istanza al momento della creazionedentro() - Chiamato quando viene creata un'istanzaAggiungi il seguente snippet al tuo contacts.js file per creare il controllo che gestirà i contatti:
Contacts = can.Control (init: function () this.element.html (can.view ('views / contactsList.ejs', contacts: this.options.contacts, categories: this.options.categories)) ;) Quando un'istanza di Contatti è creato, dentro() farà due cose:
posso vedere() per rendere i contatti. posso vedere() accetta due parametri: il file o l'id del tag script che contiene il nostro codice template e i dati. Restituisce il risultato reso come documentFragment (un contenitore leggero che può contenere elementi DOM).posso vedere() nell'elemento del controllo usando jQuery .html ().Un modello astrae il livello dati di un'applicazione. In questa applicazione sono necessari due modelli: uno per i contatti e uno per le categorie. Aggiungi questo codice a contacts.js:
Contact = can.Model (findAll: 'GET / contacts', crea: "POST / contacts", aggiorna: "PUT / contacts / id", destroy: "DELETE / contacts / id", ); Category = can.Model (findAll: 'GET / categories', );
Un modello ha cinque metodi statici che è possibile definire per creare, recuperare, aggiornare ed eliminare i dati. Loro sono trova tutto, trova uno, creare, aggiornare e distruggere. È possibile sovrascrivere queste funzioni per lavorare con qualsiasi back-end, ma il modo più semplice per definire un modello è l'utilizzo del servizio REST, come esemplificato nel codice sopra. È possibile omettere in sicurezza tutti i metodi statici che non verranno utilizzati in un'applicazione.
È importante sottolineare che le istanze del modello in CanJS sono in realtà ciò che chiamiamo "osservabili". can.Observe fornisce il modello osservabile per gli oggetti e can.Observe.List fornisce lo schema osservabile per gli array. Ciò significa che puoi ottenere e impostare le proprietà usando attr () e associare a cambiamenti in quelle proprietà.
Il trova tutto() metodo restituisce a Model.list, il quale è un can.Observe.List che innesca eventi quando un elemento viene aggiunto o rimosso dalla lista.
Le fixture intercettano le richieste AJAX e simulano la loro risposta con un file o una funzione. Questo è fantastico per test, prototipazione o quando un back-end non è ancora pronto. Le fixture sono necessarie per simulare il servizio REST che i modelli di questa applicazione stanno utilizzando.
Ma prima, avrai bisogno di alcuni dati di esempio per i proiettori da utilizzare. Aggiungere il seguente codice a contacts.js:
var CONTACTS = [id: 1, nome: 'William', indirizzo: '1 CanJS Way', email: '[email protected]', telefono: '0123456789', categoria: 'collaboratori', id : 2, nome: "Laura", indirizzo: "1 CanJS Way", email: "[email protected]", telefono: "0123456789", categoria: "amici", id: 3, nome: "Lee" , indirizzo: "1 CanJS Way", email: "[email protected]", telefono: "0123456789", categoria: "famiglia"]; var CATEGORIE = [id: 1, nome: 'Famiglia', dati: 'famiglia', id: 2, nome: 'Amici', dati: 'amici', id: 3, nome: 'Co- lavoratori ', dati:' collaboratori '];
Ora che hai alcuni dati, devi collegarli alle fixture in modo da poter simulare un servizio REST. can.fixture () prende due parametri. Il primo è l'URL che vogliamo intercettare e il secondo è un file o una funzione che viene utilizzata per generare una risposta. Spesso gli URL che vuoi intercettare sono dinamici e seguono uno schema. In questo caso, dovresti utilizzare gli URL basati su modelli. Aggiungi semplicemente parentesi graffe all'URL in cui desideri abbinare i caratteri jolly.
Aggiungi il seguente a contacts.js:
can.fixture ('GET / contacts', function () return [CONTATTI];); var id = 4; can.fixture ("POST / contacts", function () return id: (id ++)); can.fixture ("PUT / contacts / id", function () return ;); can.fixture ("DELETE / contacts / id", function () return ;); can.fixture ('GET / categories', function () return [CATEGORIES];); I primi quattro proiettori simulano il OTTENERE, INVIARE, METTERE e ELIMINA risposte per il Contatto modello, e il quinto proiettore simula il OTTENERE risposta per il Categoria modello.
La tua applicazione ha modelli per i tuoi dati, Views per eseguire il rendering dei contatti e un Control per agganciare tutto. Ora hai bisogno di avviare l'applicazione!
Aggiungi questo al tuo contacts.js file:
$ (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););); Diamo uno sguardo più da vicino a ciò che sta accadendo in questo codice:
$ (Document) .ready (function ()
Attendi che il DOM sia pronto usando la funzione di documento pronto di jQuery.
$ .when (Category.findAll (), Contact.findAll ()). then (function (categoryResponse, contactResponse)
Chiamata trova tutto() su entrambi i modelli per recuperare tutti i contatti e le categorie. Da trova tutto() restituisce un rinviato, $ .Quando () è usato per fare entrambe le richieste in parallelo ed eseguire una richiamata quando sono finite.
var categories = categoryResponse [0], contacts = contactResponse [0];
Ottieni l'elenco delle istanze del modello dalla risposta dei due trova tutto() chiamate. Le risposte sono array, con il primo indice che rappresenta l'elenco delle istanze del modello recuperate.
nuovi contatti ("# contatti", contatti: contatti, categorie: categorie); Crea un'istanza di Contatto Controllo sul #contacts elemento. L'elenco di contatti e categorie viene passato nel Controllo.
Quando esegui l'applicazione in un browser, dovresti visualizzare un elenco di contatti:
Questo lo fa per la prima parte di questa serie! Sei stato introdotto nel nucleo di CanJS:
Nella prossima lezione, creerai un Controllo e vista per visualizzare le categorie e utilizzare il routing per filtrare i contatti. Spero di vedervi lì!
Domande? Chiedi via di seguito! Non vedo l'ora di saperne di più? La seconda parte della serie è stata pubblicata qui!
