Accentsconagua

Scufundări în CanJS Partea 3

Cod
Share

Aceasta este ultima parte a tutorialului din trei părți, care vă va învăța cum să creați o aplicație de manager de contacte în JavaScript, folosind 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 partea a doua, ați creat vizualizările și controalele necesare pentru a afișa categorii, a ajutat la modelul Model.List, a utilizat rutarea pentru a filtra contactele și a modifica EJS pentru a profita de legarea live.

În această parte a tutorialului, veți:

  • Editați și ștergeți contactele utilizând a lua legatura Control
  • Creați un control și vizualizați pentru a crea contacte
  • Ascultați evenimentele DOM și Model utilizând instrumentele de gestionare a evenimentului șablon de control

Veți adăuga la fișierele sursă din părțile unu și doi, deci dacă nu ați făcut-o deja, prindeți-le pe prima și la două.

Actualizarea unui contact

În prima parte, contactView.ejs plasat fiecare proprietate a unui contact este într-o etichetă de intrare. Pentru a actualiza un contact atunci când aceste intrări se modifică, va trebui să adăugați niște handlers de evenimente la a lua legatura Control. Adăugați acest cod contacts.js în interiorul Contacte Control:

 '.contact de intrare focusout': funcție (el, ev) this.updateContact (el); , ".contact select input": funcția (el, ev) if (key.file ============================================================================================ this.updateContact (el), actualizareContact: functie (el) var contact = el.closest ('contact') date ('contact'); contact.attr (el.attr ('nume'), el.val ()). save ();

Să trecem prin acest cod liniar și să vedem cum funcționează:

 '.contact de intrare focusout': funcție (el, ev) this.updateContact (el); ,

apeluri updateContact () atunci când există pierde concentrarea.

 '.contact input key': funcția (el, ev) if (ev.keyCode == 13) el.trigger ('blur')

Declanșează estompa eveniment pe un dacă tasta enter este apăsată în timp ce are focalizare. Aceasta va determina pierderea focalizării de intrare, care este tratată de către focusout organizatorul evenimentului.

 '.contact select change': funcție (el, ev) this.updateContact (el),

apeluri updateContact () atunci când valoarea lui potrivește o proprietate de contact, deci el.attr ( 'nume') va returna numele proprietății care este actualizată. Salvați() este utilizat pentru a salva modificarea la a lua legatura Model.

Ștergerea unui contact

Există o legătură mică cu un "X" în colțul din dreapta sus al fiecărui contact. Când se face clic pe acesta, contactul trebuie șters. Pentru a face acest lucru, adăugați un alt handler la eveniment Contacte control care arată astfel:

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

Cand X este făcută clic pe, instanța de contact este preluată de la cea mai apropiată

  • și distruge() se numește. distruge() șterge contactul din model și îl elimină din orice model.

    Legarea live va actualiza automat interfața dvs. utilizator atunci când un contact este șters.

    Crearea unui contact

    Acum veți crea controlul și vizualizarea necesare pentru a crea un contact. Mai întâi veți avea nevoie de un buton gigant "Nou contact". Adăugați acest cod la index.html chiar deasupra

    :

       Contact nou

    Va trebui, de asemenea, să creați o nouă vizualizare care va face un formular pentru crearea unui contact. Salvați acest cod ca createView.ejs în dosarul vizualizări:

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

    Această vizualizare redă contactView.ejs sub-șablon și adaugă butoanele "Salvați" și "Anulați". Iată cum arată în aplicație:

    Acum va trebui să creați un nou control denumit Crea care va afișa formularul și va salva noul contact la a lua legatura Model. Adăugați acest cod la contacts.js:

     Create = can.Control (show: function () this.contact = new Contact (); this.element.html (can.view ('views / createView.ejs', contact: this.contact, (200);), hide: function () this.element.slideUp (200);, '.contact input input': function (el, ev)  (el) this.createContact (el), '.cancel click': function () this.createContact (el); .hide (); createContact: function () varform = this.element.find ('form'); values ​​= can.deparam (form.serialize () ) this.contact.attr (valori) .save (); this.hide (););

    Să mergem în detaliu acest control pentru a vedea ce se întâmplă:

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

    Creează un contact gol utilizând contact nou() și îl atribuie this.contact. Noul contact este trecut la can.view () împreună cu categoriile care urmează să fie redate.

     ascunde: funcția () this.element.slideUp (200); ,

    Glisați formularul afară din vedere.

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

    apeluri createContact () dacă tasta enter este apăsată în timp ce se află într-una din intrările.

     '.să salvați clic pe': function (el) this.createContact (el),

    Apel createContact () când se face clic pe butonul "Salvați".

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

    apeluri ascunde() când se face clic pe butonul "Anulare".

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

    Găsește

    element și utilizează jQuery serialize () pentru a obține un șir reprezentând toate valorile formularului. Apoi, șirul serializat este convertit la un obiect folosind can.deparam ().

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

    Dacă numele contactului nu este gol, attr () este utilizat pentru a actualiza contactul stocat în this.contact. Salvați() este chemat să salveze modificările modelului, iar formularul este ascuns prin apelare ascunde().

    Utilizarea Handlers Event Template

    Controalele acceptă, de asemenea, dispozitive de gestionare a evenimentelor șablon, care vă permit să personalizați un handler de evenimente și să ascultați evenimente pe alte obiecte decât this.element.

    Personalizați comportamentul de manipulare utilizând NUME în procesul de tratare a evenimentului. Variabila din interiorul coastelor curbate se uită în sus pe butoanele Controlului this.options în primul rând, și apoi fereastră. Ați putea crea mai multe instanțe ale aceluiași control, dar personalizați comportamentul gestionarilor de evenimente în fiecare instanță.

    Controalele se pot lega și de alte obiecte decât this.element folosind manipulatoare de evenimente șablon. Dacă variabila din interior NUME este un obiect, Control se va lega de acel obiect pentru a asculta evenimente. Obiectul nu trebuie să fie un element DOM, poate fi orice obiect ca un model. Pentru a asculta un clic oriunde pe o pagină pe care o folosești: 'document faceți clic pe'. ca manipulator de evenimente.

    Acești manipulatori vor fi curățați când instanța Control este distrusă. Acest lucru este esențial pentru evitarea scurgerilor de memorie care sunt frecvente în aplicațiile JavaScript.

    Afișarea formularului

    Va trebui să utilizați un handler de evenimente șablon pentru a afișa formularul când se face clic pe butonul "Contact nou". Adăugați acest handler de evenimente la Crea Controlează în contacts.js:

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

    Butonul "Contact nou" este în afara ecranului Crea Elementul de control, deci 'document # new-contact' este folosit ca selector pentru buton. Când se face clic pe ea, formularul va aluneca în jos.

    Inițializarea funcției Creare comandă

    Ca și celelalte aplicații de control din aplicația dvs., va trebui să creați o nouă instanță a aplicației Crea Control. Actualizați funcția pregătită pentru documente în contacts.js pentru a arata astfel:

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

    Cu această schimbare, o instanță a Crea Controlul va fi creat pe #crea element. Se va trece lista categoriilor.

    Reactând la un nou contact

    Atunci când este creat un contact nou, Model.List stocate în Contacte Controlul trebuie actualizat. Faceți acest lucru folosind șabloane de gestionare a evenimentelor șablon. Adăugați acest handler de evenimente la Contacte Controlează în contacts.js: 

     'Contact creat': funcție (list, ev, contact) this.options.contacts.push (contact);

    Aceasta se leagă de creată eveniment al a lua legatura Model. Noul contact este adăugat la Model.List stocate în Contacte Controlează folosind Apăsați().

    Asocierea live va actualiza automat interfața aplicațiilor atunci când se adaugă contactul this.options.contacts.

    Înfășurarea în sus

    Asta este totul pentru partea finală a acestui tutorial. În partea a treia vă:

    • Operatorii de evenimente utilizați într-un control pentru a crea un nou contact
    • Crearea unei Vizualizări care face ca un formular să fie creat
    • Utilizați manipulatori de evenimente șablonați într-un control pentru a le lega la alte obiecte decât elementul Control

    Acesta este sfârșitul tutorialului managerului de contacte CanJS. Iată un rezumat al a ceea ce a fost acoperit în acest tutorial de trei părți:

    • Crearea de comenzi pentru a gestiona logica aplicațiilor
    • Rotește părți ale unei aplicații cu Vizualizări
    • Reprezentarea unui strat de date al aplicației utilizând Modele
    • Simularea unui serviciu REST cu corpuri de iluminat
    • Utilizând legarea live pentru a păstra interfața UI a aplicației în sincronizare cu stratul de date
    • Ascultarea evenimentelor cu dispozitivele de control ale evenimentului Control
    • Lucrul cu liste de instanțe model folosind Model.List

    Acum aveți tot ce aveți nevoie pentru a construi aplicații JavaScript folosind CanJS. Du-te construi ceva minunat.

    Pentru documentația completă și mai multe exemple de aplicații, vizitați CanJS. Vă mulțumim pentru lectură!

    Cod
    • ×