Scufundări în CanJS Partea 2

Aceasta este o parte a unei serii de trei părți care vă va învăța cum să creați o aplicație de manager de contacte în JavaScript utilizând CanJS și jQuery. Când ați terminat cu acest tutorial, veți avea tot ce aveți nevoie pentru a vă crea propriile aplicații JavaScript folosind CanJS!

În prima parte, ați creat modelele, vizualizările și controalele necesare pentru afișarea contactelor și a elementelor folosite pentru a simula un serviciu REST.

În această parte, veți:

• Creați un control și vizualizați pentru a afișa categorii.
• Ascultați evenimente utilizând un control.
• Utilizați rutarea pentru a filtra contactele.

Veți adăuga la fișierele sursă din prima parte, deci dacă nu ați făcut deja acest lucru, mergeți mai întâi la capăt. Voi fi aici când vei fi gata.

Configurarea rutei

Rutarea facilitează gestionarea istoricului browserului și a stării clientului în aplicațiile JavaScript de o singură pagină.

Rutarea facilitează gestionarea istoricului browserului și a stării clientului în aplicațiile JavaScript de o singură pagină. Hash-ul din adresa URL conține proprietăți pe care o aplicație le citește și le scrie. Diferite părți ale aplicației pot asculta aceste modificări și reacționează în consecință, actualizând de obicei părți din pagina curentă fără a încărca una nouă.

can.route este o observabilă specială care actualizează și răspunde la schimbările din window.location.hash. Utilizare can.route pentru a direcționa adresele URL către proprietăți, rezultând URL-uri destul de asemănătoare filtru #! / toate. Dacă nu sunt definite niciun traseu, valoarea hash este doar serializată în notație codată ca URL # categorie! = toate.

În această aplicație, rutarea va fi utilizată pentru a filtra contactele pe categorii. Adăugați următorul cod la adresa dvs. contacts.js fişier:

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

Prima linie creează un traseu cu a categorie proprietate pe care aplicația dvs. o va putea citi și scrie. A doua linie creează o rută implicită, care stabilește categorie proprietate la toate.

Lucrul cu o listă de instanțe model

A Model.List este o gamă observabilă de instanțe de model. Când definiți a Model ca a lua legatura, A Model.List pentru acest tip de model este creat automat. Putem extinde acest lucru creat Model.List pentru a adăuga funcții de ajutor care funcționează pe o listă de instanțe de model.

Listă de contacte vor avea nevoie de două funcții de ajutor pentru a filtra o listă de contacte și a raporta numărul de contacte din fiecare categorie. Adăugați acest lucru la contacts.js imediat după a lua legatura model:

 Contact.List = can.Model.List (filter: function (category) this.attr ('lungime'); var contacts = new Contact.List ([ dacă category === 'toate' || categoria === contact.attr ('categoria')) contacts.push (contact)) returnează contactele; count: function (category) return this.filter (categoria) .length;);

Cele două funcții de ajutor sunt:

• filtru() buclele prin fiecare contact din listă și returnează un nou Listă de contacte de contacte în cadrul unei categorii. this.attr ( 'lungime') este inclus aici, astfel încât EJS va stabili legarea live atunci când vom folosi acest ajutor într-o vedere.
• numara() returnează numărul de contacte dintr-o categorie utilizând filtru() funcția helper. Din cauza this.attr ( 'lungime') în filtru(), EJS va stabili legarea live atunci când vom folosi acest ajutor într-o vedere.

Dacă veți folosi un ajutor în EJS, utilizați attr () pe o listă sau o proprietate de instanță pentru a stabili legarea live.

Filtrarea contactelor

Apoi, veți modifica contactsList.ejs vizualizați pentru a filtra contactele pe baza proprietății categoriei din hash. În contactsList.ejs vizualiza, schimba parametrul trecut la listă() ajutor pentru contacts.filter (can.route.attr ( 'categorie')). Fișierul dvs. EJS ar trebui să arate astfel după ce ați terminat:

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

Pe linia doi, filtru() se numește din categoria curentă de la can.route. De când ai folosit attr () în filtru() și pe can.route, EJS va stabili legarea live pentru a re-reda interfața dvs. utilizator atunci când oricare dintre acestea se va schimba.

Până acum ar trebui să fie clar cât de puternică este viața obligatorie. Cu puțină atenție la vizualizarea dvs., interfața de utilizare a aplicației va fi complet sincronizată nu numai cu lista de contacte, ci și cu proprietatea de categorie definită în traseu.

Afișarea categoriilor

Contactele sunt filtrate atunci când proprietatea categoriei din hash este schimbată. Acum aveți nevoie de o modalitate de a lista toate categoriile disponibile și de a modifica hash-ul.

Mai întâi, creați o nouă Vizualizare pentru a afișa o listă de categorii. Salvați acest cod ca filterView.ejs în tine vizualizari pliant:

 
 
Categorii
 
 Toate (<%= contacts.count('all') %>) 
 <% $.each(categories, function(i, category) %> 
 „><%= category.name %> (<%= contacts.count(category.data) %>) 
 <% ) %> 

Să trecem peste câteva rânduri din acest cod și să vedem ce fac ei:

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

$ .each buclele prin categorii și execută un apel invers pentru fiecare dintre ele.

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

Fiecare legătură are un Categorii de date atribut care va fi tras în obiectul de date al jQuery. Ulterior, această valoare poate fi accesată utilizând .date ( „categorie“) pe etichetă. Numele categoriei și numărul de contacte vor fi folosite ca test de legătură. Legarea live este setată pe numărul de contacte, deoarece numara() apeluri filtru() care contine this.attr ( 'lungime').

De control se leagă automat metodele care arata ca manipulatoare de evenimente atunci când o instanță este creată. Prima parte a dispozitivului de tratare a evenimentului este selectorul, iar a doua parte este evenimentul pe care doriți să-l ascultați. Selectorul poate fi orice selector CSS valabil și evenimentul poate fi orice eveniment DOM sau eveniment personalizat. Deci o funcție cum ar fi "un clic" va asculta un click pe oricare tag-ul în elementul de control.

 Filtru = can.Control (init: function () var categoria = can.route.attr ('categoria') || "toate"; this.element.html (can.view .options.contacts, categories: this.options.categories)); this.element.find ('[data-category =' '+ category +' ']'). , '[data-category] click': functie (el, ev) this.element.find ('[data-category]'). addClass ("activ"); can.route.attr ('categoria', el.data ('categoria')););

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

 this.element.find ('[data-category =' '+ category +' "]).

 '[data-category] click': functie (el, ev) 

 . This.element.find ( '[date categorie]') părinte () removeClass ( 'activ'.); . El.parent () addClass ( 'activ');

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

Actualizează proprietatea categoriei în can.route utilizând valoarea din obiectul de date jQuery pentru care a fost clickat.

---

Inițializarea controlului filtrului

La fel ca și Contacte Controlați în prima parte, trebuie să creați o nouă instanță a Filtru Control. Actualizați funcția pregătită pentru documente pentru a arăta astfel:

 $ (document) .ready (functie () $ .when (Category.findAll (), contact.findAll ()). ] noi contacte ('# contacte', contacte: contacte, categorii: categorii); nou filtru ('# filter', contacts: contacts, categories: categories);

Cu această schimbare, o instanță a Filtru Controlul va fi creat pe #filtru element. Se va trece lista contactelor și categoriilor.

Acum, când rulați aplicația într-un browser, veți putea să filtrați persoanele de contact făcând clic pe categoriile din dreapta:

---

Înfășurarea în sus

Asta e tot pentru partea a doua! Iată ce am realizat:

• Crearea unui control care să asculte evenimentele și să gestioneze categoriile
• Configurarea rutare pentru filtrarea contactelor pe categorii
• Confirmați opiniile dvs., astfel încât legarea live va menține întregul dvs. interfat în sincronizare cu stratul de date

În partea a treia, veți actualiza comenzile existente pentru a permite ca persoanele de contact să fie editate și șterse. De asemenea, veți crea un nou control și vizualizare care vă permite să adăugați contacte noi.

Nu puteți aștepta să aflați mai multe? Partea a treia a seriei a fost postată aici!