Share
În partea a patra a acestei serii, am văzut cât de ușor este să adăugați și să eliminați modele din colecția noastră și să păstrați pagina actualizată în sincronizare cu modificările. În această parte, vom examina datele de model existente.
Vom începe prin adăugarea unui alt buton simplu la șablon, care va permite editarea datelor sale:
Pe măsură ce adăugăm acest buton în șablonul nostru existent, putem adăuga un șablon complet nou care poate fi utilizat pentru a face un formular editabil în care datele de model pot fi modificate. Este foarte asemănător cu șablonul existent și poate fi adăugat la pagină după șablonul existent:
Noul șablon constă în mare parte din elemente care expun datele editabile. Nu trebuie să ne facem griji cu privire la etichetele elementelor, ci să folosim datele din model ca valori implicite pentru fiecare intrare. Rețineți că folosim un câmp de formular ascuns pentru stocarea acestuia tip atributul modelului, vom folosi aceasta pentru a seta valoarea a că trebuie să adăugăm folosind scriptul nostru în loc de a avea șablonul să îl facă.
În continuare, putem lega unii agenți de procesare a evenimentelor pentru noile butoane pe care le-am adăugat; actualizați evenimente obiect în ContactView astfel încât să conțină următoarele legări noi:
"faceți clic pe button.edit": "editContact", "modificați select.type": "addType", "click.save": "saveEdits", "click.cancel": "cancelEdit"
Nu uitați să adăugați virgula din capăt la sfârșitul legării existente! Acestea sunt foarte asemănătoare cu legăturile pe care le-am folosit înainte; fiecare cheie: perechea de valori specifică pur și simplu un eveniment pentru a asculta și un selector pentru a se potrivi cu elementul care declanșează evenimentul ca cheie, iar manipulatorul de evenimente va fi executat la detectarea evenimentului ca valoare.
În același mod în care am stocat o referință la funcția de șablon în cadrul proprietății șablon al clasei noastre ContactView, ar trebui să stocăm, de asemenea, o referință la funcția de șablon pe care o vom folosi pentru a schimba contactul în modul de editare. Adăuga editTemplate imediat după proprietatea șablonului:
Accentsconagua
editTemplate: _.template ($ ("# contactEditTemplate")). html (), Acum putem adăuga chiar și manipulatorii evenimentului, care ar trebui, de asemenea, să intre în ContactView clasa după existența deleteContact () metodă. Mai întâi, vom adăuga editContact () metodă:
editațiContact: funcția () this. $ el.html (this.editTemplate (this.model.toJSON ())); var newOpt = $ ("", html:"Adăuga nou… ", valoare:" addType "), this.select = director.createSelect (), addClass (" type ") .val (acest tip $ el.find (" # type " )) .insertAfter (acest nume $) $ el.find (". nume")); acest $ $ el.find ("input [type = 'hidden']", Începem prin a ne preda noul nostru editTemplate pe care le-am adăugat la pagină utilizând submeniurile Underscore șablon () în același mod în care am adăugat fiecare contact folosind șablonul de afișare standard.
Pentru a face mai ușoară editarea tipului de contact, putem face o casetă de selectare care permite utilizatorului să comute cu ușurință între tipurile existente, dar dorim să satisfacem și posibilitatea ca utilizatorul să vrea să adauge un tip nou. Pentru a permite acest lucru, vom crea o opțiune specială pentru caseta de selectare cu textul Adăuga nou… și o valoare de AddType.
Apoi, creăm noul folosind elementul createSelect () metodă a vederii noastre principale, care, dacă vă amintiți din ultima parte a acestui tutorial, va reveni a element conținând un pentru fiecare tip unic din colecție. Îi oferim un nume de clasă și o găsim pentru a afișa tipul existent al contactului care se editează, setăm valoarea acestuia la valoarea ascunsă am adăugat în șablonul nostru. Apoi introducem noul după pentru numele persoanei de contact. Elementul nou selectat este adăugat ca proprietate a instanței de vizualizare, astfel încât să putem interacționa cu ea cu ușurință.
Odată ce am adăugat element pentru tipul de contact, putem elimina câmpul ascuns astfel încât să nu interfereze cu salvarea editării, pe care o vom examina la scurt timp.
În acest moment, ar trebui să putem face clic pe Editați | × butonul din oricare dintre contactele noastre și să transformăm conținutul acelui contact într-o formă:
Una dintre legările evenimentului pe care am adăugat-o a fost pentru Schimbare evenimentul de tip caseta de selectare, astfel încât să putem adăuga un manipulator care înlocuiește caseta cu un standard element:
dacă (this.select.val () === "addType") this.select.remove (); $ (“", " class ":" type ")).
Cand schimbarea valorii elementului verificăm mai întâi dacă valoarea sa este AddType și dacă da, eliminăm elementul din pagină și creăm un nou element pentru al înlocui. Apoi inserăm noul element folosind jQuery insertAfter () și să-l focalizați pe gata de introducere a textului.
Apoi, putem adăuga manipulatorul care va lua modificările făcute în formularul de editare și va actualiza datele din model. Adaugă saveEdits () metoda imediat după editContact () metoda pe care tocmai am adăugat-o:
saveEdits: funcția (e) e.preventDefault (); var formData = , prev = this.model.previousAttributes (); $ ()) .closest ("form") find (": input"). "class")] = el.val ();); dacă (formData.photo === "") delete formData.photo; this.model.set (formData); this.render (); dacă (prev.photo === "/img/placeholder.png") șterge prev.photo; (contact, functie (contact)) if (_isEqual (contact, prev)) contacts.splice (_ indexOf (contacte, contact), 1, formData); , Mai întâi, vom crea un element gol pentru a stoca datele introduse în formular și pentru a stoca, de asemenea, o copie a previousAttributes a modelului care aparține vederii cu care lucrăm. previousAttributes proprietatea modelelor este un magazin de date pe care Backbone îl păstrează pentru noi, astfel încât să putem vedea cu ușurință datele anterioare ale atributelor unui atribut.
Apoi primim fiecare element de intrare din formular folosind o combinație de jQuery găsi() și metoda :intrare filtru, care ne oferă toate câmpurile formularului. Nu vrem să anulați sau să salvați elemente, de aceea, le eliminăm din selecție folosind jQuery nu() metodă.
Odată ce avem colecția noastră de câmpuri, vom itera asupra lor folosind jQuery's fiecare() și pentru fiecare element din colecție, adăugăm o nouă cheie pentru noi formData obiect utilizând clasa elementului curent și o nouă valoare utilizând valoarea elementului curent.
Când transformăm contactul editabil într-un contact normal, nu vrem să pierdem fotografia implicită dacă nu a fost aleasă o nouă fotografie. Pentru a vă asigura că nu pierdem fotografia implicită, putem șterge fotografia fotografie proprietate de la noi formData obiect dacă valoarea sa este necompletată.
Modelele backbone au o metodă setter care poate fi utilizată pentru a seta orice atribut.
Modelele backbone au o metodă setter care poate fi utilizată pentru a seta orice atribut. Pentru a actualiza datele modelului, noi îi sunăm a stabilit() metoda de trecere în formData obiect pe care l-am pregătit. Odată ce acest lucru se face, numim vizualizarea face() metoda și noul nostru model actualizat vor fi redate înapoi la pagină, cu orice informații actualizate din formular.
După cum am făcut anterior, trebuie să actualizăm datele stocate în originalul nostru contacte astfel încât filtrarea vederii nu a pierdut nici o schimbare pe care am făcut-o. Facem acest lucru într-un mod foarte similar ca înainte, verificând mai întâi dacă fotografie proprietatea are valoarea implicită și o elimină dacă este așa, și apoi folosind o combinație de Underscore fiecare() și isEqaul () metode pentru a găsi elementul din matricea de contacte care sa schimbat. Aici folosim previousAttributes pe care am salvat-o mai devreme; nu mai putem folosi modelul actual deoarece atributele sale tocmai au fost actualizate.
Folosim JavaScript-urile native lipitură() pentru actualizarea funcției contacte matrice. Ca si inainte, obtinem indexul elementului pentru a se actualiza folosind Underscore's Index de() metoda ca primul argument pentru lipitură() și setați funcția pentru a actualiza un singur element utilizând al doilea argument. De data aceasta ne aprovizionăm formData obiect ca al treilea argument. Cand lipitură() primește trei (sau mai multe) argumente, al treilea argument este datele care înlocuiesc datele care tocmai au fost eliminate.
Avem un singur buton pe care trebuie să-l adăugăm pentru un buton de anulare. Această metodă va fi foarte simplă și va schimba doar contactul înapoi în modul fără editare, utilizând datele originale din model. Adăugați această metodă după saveEdits () metodă:
cancelEdit: funcția () this.render (); ,
Asta e tot ce trebuie să facem! Avem deja o metodă care ia un model și o face ca o vedere pe pagină, așa că numim pur și simplu această metodă, iar datele modelului original vor fi folosite pentru a recrea contactul original. Acest lucru este util deoarece, chiar dacă cineva modifică datele în câmpurile de formular în timp ce contactul este în modul de editare, când se face clic pe butonul de anulare, aceste modificări vor fi pierdute.
În această parte a tutorialului am analizat modul în care putem actualiza datele unui model existent, în loc să creăm un model cu totul nou. Pentru a face acest lucru, trebuie doar să numim modelul a stabilit() și să trecem la noile atribute pe care dorim să le stabilim.
La fel ca în cazul Backbone, am acoperit doar o mică parte din ceea ce oferă aceste biblioteci, există atât de multe pe care le putem folosi atunci când construim aplicații complexe pe front-end.
După cum am văzut însă, trebuie să ne gândim și la modul în care putem schimba vederea pentru a permite vizitatorului să introducă datele care vor fi setate ca atribute noi. În acest exemplu, am obținut acest lucru creând un alt șablon pentru a gestiona redarea unui formular prealabil cu datele de atribut existente pe care utilizatorul poate să le suprascrie pentru a le schimba.
În cursul acestei serii, am analizat toate componentele principale ale Backbone, inclusiv modele, colecții, viziuni și rutere și evenimente. De asemenea, am analizat unele dintre metodele și proprietățile oferite de Backbone pe care le putem folosi pentru a interacționa cu diferitele constructe pentru a produce o aplicație integrată, funcțională, deși una de bază.
Pe lângă învățarea unor elemente fundamentale ale sistemului Backbone, unul dintre cele mai importante aspecte ale tutorialului a fost modul în care aplicația este structurată, cu tot codul nostru organizat într-un mod logic și consecvent. Aplicațiile scrise în acest stil pot fi mult mai ușor de revenit și de menținut pe termen lung. O mare parte din funcționalitatea noastră a fost condusă de evenimente, fie ca reacție la acțiunile vizitatorului sub formă de agenți de procesare a evenimentelor UI, dar și unii au fost determinați de modificările colectării și declanșate manual la punctul corespunzător din codul nostru.
.
