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

Acest cod face ca contactView.ejs sub-șablon pentru fiecare contact. can.view.render () ia un șablon și date ca parametri și returnează HTML.

Efectuarea unui contact unic

Sub-șabloanele reprezintă o modalitate excelentă de a vă organiza punctele de vedere în bucăți ușor de gestionat. De asemenea, vă ajută să vă simplificați șabloanele și să vă promovați DRY (Do not Repeat Yourself). Mai târziu, în acest tutorial, veți reutiliza acest șablon pentru a crea contacte. Salvați acest cod ca contactView.ejs în dosarul vizualizări:

  
 
 
  
 
 >  <% $.each(categories, function(i, category) %> > <%= category.name %>  <% ) %>  
 
 Adresa > Telefon > E-mail > 
 
 

Fiecare proprietate a unui contact este plasată într-un etichetă. Acestea vor fi folosite pentru a adăuga și a actualiza informațiile unui contact.

Efectuarea vizionărilor dvs. live

Oricând se întâlnesc EJS attr () în timp ce procesează un șablon, știe că codul înconjurător ar trebui transformat într-un manipulator de evenimente legat de modificările acelei proprietăți. Atunci când proprietatea este modificată în altă parte a aplicației, procesul de procesare a evenimentului este declanșat și interfața dvs. utilizator va fi actualizată. Acest lucru este denumit legare viu. Legarea Live EJS este opțională. Se pornește numai dacă utilizați attr () pentru a accesa proprietățile.

Să ne uităm la unul dintre etichete din contactView.ejs pentru a vedea cum funcționează aceasta:

 >

Codul din etichetele magice va deveni un manipulator de evenimente legat de proprietatea numelui contactului. Când actualizăm proprietatea nume, rulați evenimentul și codul HTML va fi actualizat.

Organizarea utilizării logicii aplicațiilor can.Control

can.Control creează un control organizat, fără scurgeri de memorie, care poate fi utilizat pentru a crea widget-uri sau pentru a organiza logica aplicațiilor. Creați o instanță a unui Control pe un element DOM și transmiteți datele pe care controlul dvs. le va avea nevoie. Puteți defini orice număr de funcții în Control și puteți lega evenimentele.

Atunci când elementul pe care este legat Controlul dvs. este eliminat din DOM, Controlul se distruge, curățând orice manipulator de evenimente obligatorii.

Pentru a crea un nou control, extindeți can.Control () prin trecerea acestuia un obiect care conține funcțiile pe care doriți să le definiți. În partea a doua, vor fi transmise, de asemenea, și operatorii de evenimente.

Există câteva variabile și funcții importante prezente în fiecare instanță de control:

• acest - O referință la instanța de control
• this.element - Elementul DOM pe care l-ați creat
• this.options - Un obiect care conține orice date transmise instanței când a fost creată
• init () - Chemată când se creează o instanță

Gestionarea contactelor

Adăugați următorul fragment la dvs. contacts.js fișier pentru a crea controlul care va gestiona contactele:

 Contacte = can.Control (init: function () this.element.html (can.view ('views / contactsList.ejs', contacts: this.options.contacts, categories: this.options.categories ;)

Când o instanță de Contacte este creat, init () vor face două lucruri:

1. utilizări can.view () pentru a face contacte. can.view () acceptă doi parametri: fișierul sau idul etichetei de script care conține codul și datele șablonului. Returnează rezultatul randat ca documentFragment (un container ușor care poate conține elemente DOM).
2. Se inserează fragmentul de documente de la can.view () în elementul Control folosind jQuery .html ().

Reprezentarea datelor utilizând modele

Un model absoarbe stratul de date al unei aplicații. Două modele sunt necesare în această aplicație: una pentru contacte și una pentru categorii. Adăugați acest cod la contacts.js:

 Contact = can.Model (findAll: "GET / contacte", creați: "POST / contacts", actualizare: "PUT / contacts / id", distruge: "DELETE / contacts / id",  ); Categorie = can.Model (findAll: 'GET / categorii', );

Un model are cinci metode statice pe care le puteți defini pentru a crea, prelua, actualiza și șterge datele. Sunt Găsiți toate, găsește una, crea, Actualizați și distruge. Puteți suprascrie aceste funcții pentru a lucra cu orice back-end, dar cel mai simplu mod de a defini un model este utilizarea serviciului REST, exemplificat în codul de mai sus. Puteți să omiteți cu ușurință orice metodă statică care nu va fi utilizată într-o aplicație.

Este important să subliniem aici că instanțele model din CanJS sunt de fapt ceea ce numim "observabile". can.Observe furnizează modelul observabil pentru obiecte și can.Observe.List furnizează modelul observabil pentru matrice. Aceasta înseamnă că puteți obține și seta proprietățile utilizând attr () și se leagă de schimbările acestor proprietăți.

Găsiți toate() metoda returnează a Model.list, care este un can.Observe.List care declanșează evenimentele atunci când un element este adăugat sau eliminat din listă.

Simularea unui serviciu de repaus folosind programe fixe

Programele fixează intermitent solicitările AJAX și simulează răspunsul lor cu un fișier sau o funcție. Acest lucru este fantastic pentru testare, prototipuri sau când un back-end nu este încă pregătit. Luminile sunt necesare pentru a simula serviciul REST pe care îl folosesc modelele din această aplicație.

Dar, mai întâi, veți avea nevoie de câteva date de probă pentru a le utiliza. Adăugați următorul cod la contacts.js:

 VERDE CONTACT = id: 1, nume: 'William', adresa: '1 CanJS Way', email: '[email protected]', telefon: '0123456789', categoria: : 2, numele: 'Laura', adresa: '1 CanJS Way', email: '[email protected]', telefon: '0123456789', categoria: 'friends' , adresa: '1 CanJS Way', email: '[email protected]', telefon: '0123456789', categoria: 'family']; var id = 1, nume: 'Familie', date: 'familie', id: 2, lucrătorilor ", date:" colegii "];

Acum, că aveți unele date, trebuie să vă conectați la dispozitive, astfel încât să puteți simula un serviciu REST. can.fixture () are doi parametri. Prima este adresa URL pe care dorim să o interceptăm, iar cea de-a doua este un fișier sau o funcție care este utilizată pentru a genera un răspuns. Adesea, adresele URL pe care doriți să le interceptați sunt dinamice și urmează un model. În acest caz, ar trebui să utilizați adrese URL șablon. Pur și simplu adăugați bretele curry la URL-ul unde doriți să potriviți cu metacaractere.

Adăugați următoarele la contacts.js:

 can.fixture ('GET / contacte', functie () return [CONTACTS];); var id = 4; can.fixture ("POST / contacts", funcția () return id: (id ++)); can.fixture ("PUT / contacts / id", funcția () return ;); can.fixture ("DELETE / contacts / id", funcția () return ;); can.fixture ('GET / categories', function () retur [CATEGORII];);

Primele patru fixe simulează OBȚINE, POST, A PUNE și ȘTERGE răspunsuri pentru a lua legatura model, iar al cincilea dispozitiv simulează OBȚINE răspuns pentru Categorie model.

Bootstraparea aplicației

Aplicația dvs. are modele pentru datele dvs., vizionări pentru redarea contactelor și un control pentru a închide totul. Acum trebuie să începeți aplicația!

Adăugați-o la dvs. contacts.js fişier:

 $ (document) .ready (functie () $ .when (Category.findAll (), contact.findAll ()). ], contacte noi ('# persoane de contact', contacte: persoane de contact, categorii: categorii);););

Să aruncăm o privire mai atentă la ceea ce se întâmplă în acest cod:

 $ (Documentul) .ready (function () 

Așteptați ca DOM să fie gata folosind funcția gata de document a lui jQuery.

 $ .when (Category.findAll (), Contact.findAll ()), apoi (funcția (categoryResponse, contactResponse) 

Apel Găsiți toate() pe ambele modele pentru a prelua toate contactele și categoriile. De cand Găsiți toate() returnează un amânat, $ .La () este folosit pentru a face ambele cereri în paralel și pentru a executa un apel invers când sunt terminate.

 var categorii = categorieResponse [0], contacts = contactResponse [0];

Obțineți lista instanțelor de model din răspunsul celor două Găsiți toate() apeluri. Răspunsurile sunt matrice, primul indice fiind lista instanțelor de model recuperate.

 contacte noi ('# persoane de contact', contacte: persoane de contact, categorii: categorii);

Creați o instanță a a lua legatura Controlați pe #contacte element. Lista de contacte și categorii este transmisă în Control.

Când rulați aplicația într-un browser, ar trebui să vedeți o listă de contacte:

Înfășurarea în sus

Asta face pentru prima parte a acestei serii! Ați fost introdus în centrul CanJS:

• modele rezumați stratul de date din aplicația dvs.
• Vizualizări sunt șabloane care transformă datele în HTML
• Controale sârmă totul în sus.

În următoarea lecție, veți crea o Control și Vedere pentru a afișa categoriile și a utiliza rutarea pentru a filtra contactele. Sper sa te vad acolo!

Întrebări? Întreabă mai departe! Nu puteți aștepta să aflați mai multe? Partea a doua a seriei a fost postată aici!