Construiți un manager de contacte utilizând Backbone.js Partea 1 / Cod

În acest tutorial, vom analiza construirea unui manager de contacte complet funcțional utilizând Backbone.js, Underscore.js și jQuery. Vom arunca o privire asupra componentelor de bază care fac bifarea backbone, precum și a unor metode de comoditate expuse de Underscore.

Ce sunt exact toate aceste biblioteci?

Backbone este un cadru arhitectural care ne permite să creăm cu ușurință aplicații non-trivial JavaScript folosind organizarea și structura stilului MVC. Backbone nu este considerat adevărat MVC - C este pentru Colectorul nu Controller, dar încă mai oferă multe din aceleași beneficii și ne permite să scriem un cod puternic și ușor de întreținut.

Underscore este o bibliotecă de utilități care oferă funcționalitate sporită JavaScript, adăugând funcții suplimentare pentru a lucra cu array-uri, colecții, funcții și obiecte.

Noțiuni de bază

Avem nevoie de un director de proiect rădăcină care să conțină css, img și js subfoldere, așa că continuați și creați-le acum. Vom începe cu următoarea pagină HTML:

Salvați ca index.html în directorul de proiect rădăcină. Singura cerință obligatorie a backbone-ului este Underscore.js, dar vom dori, de asemenea, să folosim jQuery, astfel încât să le conectăm la aceste două biblioteci înainte de Backbone. Codul aplicației noastre va intra în vigoare app.js și toate stilurile vor intra în screen.css. Pe pagină, avem un container gol care va forma baza aplicației noastre.

În continuare, putem crea fișierul JavaScript schelet pe care îl vom completa treptat în cursul acestei serii. Într-un fișier nou adăugați următorul cod:

Salvați acest lucru în js dosar ca app.js. Vom pune întregul cod într-o funcție anonimă pe care o invocăm imediat, alcătând jQuery ca fiind $ caracter. De asemenea, în această etapă este definită o serie de obiecte în care fiecare obiect reprezintă un contact.

Vom folosi acest magazin local de date pentru această parte a tutorialului, deoarece ne permite să facem un script să funcționeze fără să vă faceți griji cu privire la sincronizarea cu un server. O vom salva pentru o altă zi!

modele

Un model reprezintă datele unei aplicații; în aplicația noastră, acesta va fi un contact individual, care va avea atribute cum ar fi un nume, un număr de contact etc. Puteți spune că un model individual reprezintă partea atomică a aplicației - cea mai mică unitate posibilă de funcționalitate. Adăugați următorul cod direct după matricea de date:

Pentru a crea un model în Backbone, noi extindem Backbone.Model clasa folosind extinde() metodă. Putem trece un obiect în metoda care ne permite să personalizăm modelul cu propriile noastre funcționalități. Se numește una dintre proprietățile pe care le putem seta în acest obiect implicite. Această proprietate ne permite să configuram valorile implicite pentru orice atribut pe care dorim să îl aibă modelele noastre.

În acest caz, am setat o imagine substituent ca valoare implicită a fotografie atribut pentru instanțe de model. Orice model care nu are acest atribut când este definit va fi dat.

Modelele au alte proprietăți pe care le putem folosi pentru a adăuga funcționalități; am putea defini o inițializa () , iar această metodă va fi invocată automat de Backbone pentru noi atunci când fiecare model este inițializat. Nu vom mai folosi acest lucru în prezent, dar nu vă faceți griji, vom reveni la modele mai târziu.

Colecții

O colecție este o clasă pentru gestionarea grupurilor de modele. Vom folosi unul simplu în acest exemplu pentru a stoca toate contactele noastre. Adăugați următorul cod direct după a lua legatura model:

Ca un model, o colecție este o clasă Backbone pe care o extindem pentru a adăuga funcții personalizate specifice aplicației noastre. Colecțiile au, de asemenea, un extinde() și acceptă un obiect care ne permite să setăm proprietățile clasei și să adăugăm un comportament. Noi folosim model proprietatea de a spune colecției ce clasă ar trebui să fie construită fiecare articol din colecție, care în acest caz este o instanță a noastră a lua legatura model. Nu vă faceți griji că clasele pe care le-am definit până acum par foarte simplu, ne vom întoarce și vom adăuga funcționalități suplimentare în secțiunile ulterioare ale tutorialului.

Vizualizări

Vizualizările sunt responsabile pentru afișarea datelor aplicației într-o pagină HTML. Unul dintre beneficiile separării părților aplicației care prelucrează datele și a părților care afișează datele este că putem face foarte ușor o schimbare la una, fără a necesita schimbări extinse asupra celeilalte. Vom folosi câteva opinii în aplicația noastră, prima dintre care ar trebui adăugată imediat după Director clasă:

Această vizualizare se ocupă cu afișarea unui contact individual. La fel ca modelele și colecțiile, punctele de vedere au un extinde() - metoda folosită pentru extinderea Backbone.View clasă. Am stabilit câteva proprietăți de instanță în opinia noastră; nume eticheta proprietatea este utilizată pentru a specifica containerul pentru vizualizare și numele clasei proprietăți specifică un nume de clasă care este adăugat la acest container. Vom folosi un șablon simplu în fișierul HTML pentru a face fiecare contact, astfel încât șablon proprietatea stochează o referință cache la șablon, pe care o selectăm din pagină folosind jQuery.

Apoi definim a face() funcţie; această funcție nu este invocată automat de Backbone și în timp ce am putea să-i sunăm de la apelul automat invocat inițializa () metoda de a face vizualizarea de auto-randare, nu avem nevoie în acest caz.

În cadrul face() metodă vom stoca o referință la Underscore's șablon () și treceți la acesta șablonul stocat. Atunci când a trecut un singur argument care conține un șablon Underscore nu îl invocă imediat, ci va returna o metodă care poate fi apelată pentru a reda șablonul.

element creat de vizualizarea șablonului interpolat utilizând jQuery html () pentru confort. Acest lucru se face prin apelarea funcției templante pe care Underscore a returnat-o anterior și trecând-o cu datele interpolate. Datele sunt obținute din model folosind Backbone's toJSON () metoda de pe model. Interpolarea înseamnă că simbolurile din șablon sunt înlocuite cu date reale. Observați, de asemenea, că folosim $ el pentru a seta conținutul HTML; acesta este un obiect jQuery stocat în cache reprezentând elementul curent, astfel încât să nu trebuiască să continuăm să creăm noi obiecte jQuery.

La sfârșitul face() metoda, vom returna acest obiect, care indică instanța de vizualizare că face() metoda este chemată. Acest lucru este astfel încât să putem lanț alte metode Backbone la instanța de vizualizare după ce apelează face() metodă.

Micro Templating cu Underscore

Acum, probabil, ar fi un moment potrivit să analizăm subtilitățile încorporate în micro-templating ale Underscore. Underscore oferă șablon () așa cum am văzut să consumăm și să interpolam șabloanele. În pagina HTML trebuie să adăugăm șablonul pe care îl vom folosi; adăugați următorul cod imediat după containerul de contacte

Noi folosim a > element cu un id atributul, astfel încât să îl putem selecta cu ușurință, și un obicei tip astfel încât browserul să nu încerce să îl execute. În cadrul șablonului specificăm structura HTML pe care dorim să o folosim și să o folosim jetoanele pentru a specifica unde trebuie inserate datele modelului. Există câteva alte caracteristici pe care le putem folosi cu Underscore, incluzând interpolarea valorilor escapate prin HTML sau executarea JavaScript arbitrar, dar nu trebuie să le folosim în scopul acestui tutorial.

 
 O vizualizare Master
 Pentru a termina această parte a tutorialului, vom crea o viziune suplimentară. Vederea noastră curentă reprezintă fiecare contact individual, astfel încât acesta este cartografiat unui model pe o bază 1: 1. Dar acest punct de vedere nu este auto-redare și nu am invocat-o încă. Ceea ce avem nevoie este o vizualizare care hărții 1: 1 la colecția noastră, o vizualizare principală care va face numărul corect de vizualizări de contact pentru a afișa fiecare dintre contactele noastre. Imediat după ContactView, adăugați următoarea clasă:
 var DirectorView = Backbone.View.extend (el: $ ("# contacte"), initialize: function () this.collection = var = contact_report_video = new contactView (model: this.renderContact (item);, this);, renderContact: elementul), acest lucru $ el.append (contactView.render (). el););
 Această vizualizare va fi atașată la un element care există deja pe pagină, containerul gol care este codat greu în , astfel încât să selectăm elementul cu jQuery și să îl setăm ca el proprietate. Atunci când definiți un simplu inițializa () funcția care creează o instanță a clasei noastre de colectare și apoi o numește proprie face() metodă, făcând acest punct de vedere auto-redare.
 Apoi definim face() metodă pentru viziunea noastră principală. În cadrul acestei funcții, stocăm o referință la vizualizare, astfel încât să putem accesa această funcție în cadrul unei funcții de apel invers, apoi utilizați funcția Underscore fiecare() metoda de iterare a fiecărui model din colecția noastră.
 Această metodă acceptă două argumente (în această formă, deși poate fi utilizată și cu un singur argument); prima este colecția de itemi pentru iterație, a doua este o funcție anonimă care trebuie executată pentru fiecare element. Această funcție de apel invers acceptă elementul curent ca argument. Tot ceea ce facem în cadrul acestei funcții de apel invers este apelul renderContact () și treceți la ele elementul curent.
 În cele din urmă definim renderContact () metodă. În această metodă creăm o nouă instanță a noastră ContactView clasă (amintiți-vă, ContactView clasa reprezintă un contact individual) și setați-o model proprietatea asupra elementului trecut în metodă. Apoi adăugăm elementul creat prin apelarea vizualizării face() metoda pentru a $ el proprietate a DirectoryView vizualizare master (containerul gol selectat din pagină). $ el proprietatea este un obiect jQuery stocat în cache, pe care Backbone îl creează automat pentru noi.
 Vederea principală este responsabilă pentru generarea fiecărui model individual din colecția noastră. Tot ceea ce trebuie să facem este să inițializăm viziunea noastră principală și, pentru că este auto-randare, va afișa toate contactele specificate în matricea de date fictive:
 var director = nou DirectorView ();
 Când rulați această pagină într-un browser acum, ar trebui să vedem o reprezentare vizuală a datelor noastre:
  Backbone creează o instanță a unui model pentru fiecare element din matricea noastră originală, care este stocată în colecția noastră și redată ca o instanță a unei vizualizări.
 Acest tutorial nu are legătură cu CSS, deci nu am acoperit deloc CSS-ul. Este doar CSS de bază, dacă sunteți curios să aruncați o privire la foaia de stil inclusă în arhiva demo.
 
 rezumat
 În această parte a tutorialului am fost prezentați la unele componente principale ale Backbone.js; modele, colecții și opinii. Modelele sunt clase pe care le putem crea pentru a stoca date despre un anumit lucru și pentru a defini comportamentul pentru el. Colecțiile sunt utilizate pentru a gestiona grupuri de modele și vizionările ne permit să render modelele noastre folosind șabloane interpolate care afișează datele de la modelele noastre.
 În următoarea parte a tutorialului vom examina modul în care putem filtra colecția noastră pentru a afișa doar un subset al modelelor noastre. Vom analiza, de asemenea, o altă componentă majoră a Router-urilor Backbone.



		
			
	   
	




Cod