Share
Iată ce se întâmplă: dacă nu puteți înțelege de ce ați avea nevoie de un cadru ca Backbone, atunci este posibil să nu faceți asta! Poate că lucrați exclusiv pe site-uri simple sau teme de bază WordPress; în aceste cazuri, un cadru JavaScript structurat va fi probabil depășit.
Cu toate acestea, va veni cu siguranță o zi când îți dai seama că tot spaghetul ăsta se află înăuntru scenariu etichetele din partea de jos a paginii dvs. au devenit brusc imposibil de gestionat. Nu numai asta, ci și datorită modului în care ai structurat codul, este și imposibil de testat. Icnet! Ce sa fac?
Când acea zi apare - și va - îndreptați browserul spre Backbonejs.org și faceți un pas înainte, în timp ce avansați la nivelul următor în maturitatea de programare.
Gândiți-vă la Backbone ca un cadru mic (5.6kb, ambalat) care aduce structura aplicațiilor dvs. Implementând propria sa aromă a modelului MVC (de fapt, mai mult ca MV *), Backbone oferă instrumentele necesare pentru a vă separa datele de prezentare. Dacă vă gândiți la asta, unde cei mai mulți dintre noi adesea se împiedică atunci când încercăm disperat să ne păstrăm datele. În mod obișnuit, acest lucru are ca rezultat nenumărate interogări DOM, deoarece preluăm frenetic valorile necesare pentru a păstra prezentarea și datele noastre în sincronizare. Trebuie să existe o cale mai bună!
"Scoate-ți adevărul din DOM". - Jeremy Ashkenas (Creator al Backbone.js)
Soluția, ca creator al Backbone.js, Jeremy Ashkenas, susține atât de frecvent este să vă opriți legarea datelor către DOM. Asigurați-vă că vederea reflectă datele dvs., nu invers!
Adevărat, este probabil mai bine dacă nu încercați nici măcar să vă convertiți sensibilitățile MVC existente
Veți vedea adesea Backbone, precum și multe dintre cadrele sale de frați, denumiți MV *, mai degrabă decât MVC. Deoarece conceptul de "controller" și "vizualizare" standard de pe server nu se transferă prea bine într-un cadru JavaScript, acest lucru poate duce în mod frecvent la confuzie. Sigur a făcut pentru mine!
Adevărat, este probabil mai bine dacă nu încercați nici măcar să convertiți sensibilitățile MVC existente; te va confunda. O "vizualizare" în Ruby on Rails nu este aceeași cu o "vedere" în Backbone. Sau, un "controler" în CodeIgniter nu are într-adevăr un omolog în Backbone. De fapt, controlerele nu există în Backbone! În schimb, Backbone împrumută fragmente din alte cadre, motiv pentru care deseori ne referim la acesta ca fiind mai aproape de MVP (Model, View, Presenter) sau MV *: nu este MVC și nu este chiar MVP; este aroma proprie.
Să stabilim mai întâi modul în care logica va fi împărțită în aplicația noastră. Re-tuning conceptul nostru de modul în care JavaScript ar trebui să fie structurat poate dura un timp pentru a se adapta la, așa că nu vă faceți griji dacă acest lucru este nevoie de timp pentru a înfășura mintea în jurul.
În Backbone, datele sunt reprezentate printr-un model. Ca un exemplu, ia în considerare a Fotografie model. Acest model va defini planul unei fotografii: care este sursa fotografiei, descrierea acesteia, cine este fotografiat în fotografie etc. Putem chiar aplica validarea, dacă este necesar, printr-o opțiune valida metodă.
var Foto = Backbone.Model.extend (implicit: src: 'images / placeholder.jpg', descriere: 'Imaginea mea', oameni: []);
Cu planul în loc, putem configura acum prima noastră fotografie creând o nouă instanță a Fotografie model, cum ar fi:
var photo = new Photo (src: 'images_22 / connected-to-the-backbone.jpg', descriere: 'Cu prieteni pentru cină', oameni: ['John Doe', 'Rick James']);
Tada - ți-ai creat primul model. Dacă trebuie să preluați sau să setați informații de la acest exemplu de model, este la fel de ușor ca și utilizatorii Getters și setterii Backbone:
Accentsconagua
photo.toJSON (); // obiect care conține toate elemente de recuzită photo.get ('src'); // images_22 / linked-to-the-backbone.jpg foto.set ('src', 'images / new-path.jpg'); photo.get ( 'src'); // imagini / new-path.jpg În Backbone, ca cea mai bună practică, o vizualizare este responsabilă de reprezentarea unui element DOM unic și a oricărui copil aplicabil, cum ar fi un element de listă sau div - orice vrei. Aceasta include înregistrarea oricăror șabloane aplicabile, ascultarea și reacția la evenimente și monitorizarea modelelor și colecțiilor asociate pentru modificări.
Să creați o nouă vizualizare pentru eticheta imaginii.
var ImageView = Backbone.View.extend (tagName: 'img', inițializa: funcția () this.render ();, render: function () this. $ el.attr (src: this.model. get ('src'), alt: this.model.get ('descriere'));); Nu lăsați acest cod să vă confunde. Este destul de lizibil și elegant. O vom lua pas cu pas.
A incepe, nume eticheta specifică ce element DOM reprezintă vizualizarea. În acest caz, definim viziunea pentru un singur img element, totuși, am putea lega la fel de ușor cu un element care există deja în DOM, prin el proprietate.
var ImagineView = Backbone.View.extend (el: '# my-image');
În spatele scenei, Backbone va prelua elementul specificat (# Mea imagine) din DOM, cache-ul și să-l pună la dispoziție, prin ImageView.el și ImageView. $ El. Ultima versiune, așa cum s-ar putea să vă așteptați, este elementul învelit în jQuery (sau potențial Zepto, dacă preferați biblioteca peste jQuery).
În continuare, vă puteți gândi la inițializa ca constructor. Când se creează o nouă instanță a acestei vizualizări, metoda va fi rulată automat. Acesta este locul perfect pentru a crea orice variabile de instanță noi și pentru a vă abona la orice eveniment de model sau controller.
În cele din urmă, face metoda este responsabilă pentru construirea ieșirii. În acest caz, va seta atât src și Alt atribute ale imaginii egale cu datele stocate în modelul asociat vizualizării.
Să creăm o nouă instanță ImageView, și treci în unele date. Într-o aplicație în lumea reală, aceste date ar putea proveni dintr-o formă sau ceva similar.
var photo = new Photo (src: 'images_22 / connected-to-the-backbone.jpg', descriere: 'Cu prieteni pentru cină', oameni: ['John Doe', 'Rick James']); var imageView = noul ImageView (model: foto); imageView.el; //
Acest lucru poate fi incredibil de puternic, dacă vă gândiți la asta! În Backbone, este banal să actualizați o vizualizare ori de câte ori modelul respectiv este modificat, presupunând o relație unu-la-unu. Să ascultăm când datele (sau modelul) sunt modificate. Când este, ar trebui să actualizăm elementul în consecință.
Următorul cod poate fi adăugat la inițializa metodă a ImageView.
initialize: function () // Ascultati cand modelul este actualizat this.model.on ('change', this.render, this); this.render (); , render: function () this. $ el.attr (src: this.model.get ('src'), alt: this.model.get ('descriere')); Nu subestimați cât de eficientă poate fi această implementare PubSub. Atunci când un model este modificat, acesta face un anunț, ca să spunem așa. "Oricine este interesat - tocmai am fost modificat!" În opinia noastră, cu o singură linie de cod, ne putem abona la acest anunț și putem răspunde în consecință prin actualizarea atributelor imaginii.
this.model.on ("schimbare", acest.render, acest lucru); În acest caz, reapelam face și generează din nou atributele.
Să încercăm.
var imageView = noul ImageView (model: foto); imageView.el; //photo.set ('src', 'images_22 / linked-to-backbone.jpg'); imageView.el //
Excelent! În cazul în care aveți nevoie, puteți atașa, de asemenea, cu ușurință, ascultători de evenimente DOM evenimente obiect că Backbone va vâna în mod automat și stabilit pentru tine. Poate doriți să editați imaginea când este făcută clic pe ea:
evenimente: 'click': 'edita', edita: function () // edita imaginea
Deoarece această imagine particulară reprezintă un singur img element, putem să ne lipim clic', cu toate acestea, veți găsi adesea acest lucru View.el conține copii imbricați. În aceste cazuri, puteți specifica un selector după tipul evenimentului, după cum urmează:
evenimente: 'click span': 'doSomething', doSomething: functie ()
Codul de mai sus, folosind View.el ca context, va atașa un eveniment clic la orice copil deschideres.
Ce bun este un model pentru o singură fotografie? Să stocăm toate modelele foto într-un Fotografii Colectie. Gândiți-vă la colecții ca arhiteuri cu adaos de zahăr și metode de conveniență, grație numai dependenței Hardbone, Underscore.js.
var Fotografii = Backbone.Collection.extend (model: Photo);
Mai sus, ne-am asociat Fotografii colectare cu Fotografie model pe care l-am creat deja. Aceasta specifică faptul că toate elementele din această colecție vor fi instanțe ale Fotografie model.
Apoi, creăm instanța noastră și trecem în câteva modele pentru a ne începe. În acest caz, codificăm cu greu valorile, dar puteți prelua cu ușurință și serverul JSON.
var src: 'image2.jpg', descriere: 'Cel mai bun prieten al meu', src: 'image3.jpg' , descriere: "petrecere aniversară"]);
Observați cum, de data aceasta, se pare că pur și simplu trecem câteva obiecte la Fotografii Colectie. Cu toate acestea, în spatele scenei, fiecare obiect în mulțime vor fi convertite în a Fotografie model.
Similar cu modelele, colecțiile vor anunța orice modificare, cum ar fi atunci când un model este adăugat sau eliminat. Aceasta înseamnă că puteți asculta, de exemplu, când un element nou este adăugat la colecție. Când se întâmplă acest lucru, puteți compensa prin actualizarea DOM corespunzător cu elementul nou.
this.collection.on ('adăugați', this.appendItem); În plus, după cum sa menționat mai sus, o colecție oferă o mulțime de zahăr. De exemplu, să spunem că trebuie să luăm src proprietate de la fiecare model din colecție. Asta e un cinch cu potroace metodă!
photos.pluck ( 'src'); // ["image1.jpg", "image2.jpg", "image3.jpg"]
Observați cum, în orice moment, datele noastre sunt disponibile. Nu trebuie să solicită DOM să preia nici o valoare. "Ține-ți adevărul din DOM."
Consultați documentația Underscore.js pentru mai multe exemple de utilizare.
În acest moment, avem o colecție de fotografii, dar acum avem nevoie de o nouă viziune care să fie responsabilă de prezentarea containerului pentru fotografii. Tine minte, ImageView este responsabil doar pentru un singur element de imagine. Să creați o nouă vizualizare pentru lista de fotografii.
var PhotosView = Backbone.View.extend (tagName: 'ul', className: 'photos', initialize: function () this.render ();, render: function () var imageView; (funcția (modelul) imageView = noul ImageView (model: model) $ el.append ($ ('De data aceasta, vom crea viziunea pentru împachetare face(), metoda se va filtra prin toate modelele care sunt conținute în colecția asociată (trei, în cazul nostru), creați un nou ImageView pentru fiecare - care construiește elementul de imagine - și apoi adăugăm acel element de imagine generat la .fotografii lista neordonata.
Amintiți-vă: nu vă faceți griji cu privire la revopsire sau refolosire.
PhotosView.elnu a fost încă injectată în DOM.
photosView.el.parentNode // null
Deci, să punem totul împreună!
// Creați o colecție de modele foto. var src: 'image2.jpg', 'descriere': 'Cel mai bun prieten al meu', src: '' image3.jpg "," descriere ":" petrecere de aniversare "]); // Creați un nou PhotosView și treceți în colecția de fotografii var photosView = noi PhotosView (collection: photos); // Aruncă lista noastră de fotografii în DOM. . $ ( 'Organism') html (photosView.el);
Acest lucru poate părea confuz la început, dar cu siguranță va deveni mai ușor cu cât lucrați mai mult cu Backbone. În fragmentul de cod anterior, începem prin crearea unei colecții de Fotografie modele. Apoi, vom crea o nouă instanță a PhotosView container. Când este redat, această vizualizare filtrează toate elementele din colecția sa, creează noi ImageView și adaugă elementele rezultate în lista neordonată. În cele din urmă, luăm fragmentul DOM rezultat și îl aruncăm în DOM. Nu prea greu, ah? Și uite: structura!
Abia am zgâriat suprafața a ceea ce poate fi Backbone. Pentru a continua procesul de învățare, consultați următoarele cărți, scenarii și tutoriale.
Spinele sunt uneori criticate pentru faptul că nu oferă suficient. Nu aplică o anumită structură și nu oferă componente UI pe care le-ați putea primi de la Dojo sau jQuery UI. În mod ironic, în ciuda acestor critici, acest lucru face ca Backbone să fie atât de fantastic. Nu îți impune opiniile. Ea are un loc de muncă și un loc de muncă frumos: asigurați structura pentru aplicațiile dvs. Acum sunteți liberi să vă dați seama cât de bine se potrivesc Backbone în proiectele dvs. existente.
