Bygg en kontaktbehandler ved hjelp av Backbone.js Del 1 / Kode

I denne opplæringen skal vi se på å bygge en fullt funksjonell kontaktleder ved hjelp av Backbone.js, Underscore.js og jQuery. Vi tar en titt på de grunnleggende komponentene som gjør Backbone tick og noen av de bekvemmelighetsmetodene som er utsatt av Underscore.

Hva er egentlig alle disse bibliotekene?

Backbone er et arkitektonisk rammeverk som gjør at vi enkelt kan lage ikke-trivielle JavaScript-applikasjoner ved hjelp av MVC-stil organisasjon og struktur. Ryggraden anses ikke som ekte MVC - C er for Collection ikke Controller, men den tilbyr fortsatt mange av de samme fordelene og gjør det mulig for oss å skrive kraftig, men vedlikeholdbar kode.

Underscore er et verktøybibliotek som gir forbedret funksjonalitet til JavaScript, legger til flere funksjoner for å arbeide med arrayer, samlinger, funksjoner og objekter.

Starter

Vi trenger en røde prosjektmappe som inneholder css, img og js undermapper, så fortsett og opprett disse nå. Vi starter med følgende HTML-side:

Lagre dette som index.html i roteprosjektmappen. Ryggrads eneste obligatoriske krav er Underscore.js, men vi vil også bruke jQuery, så vi kobler til disse to bibliotekene før Ryggrad. Vår søknadskode går inn i app.js og noen stiler vil gå inn i screen.css. På siden har vi en tom beholder som vil danne grunnlag for vår søknad.

Deretter kan vi lage skjelettet JavaScript-filen som vi gradvis vil fylle ut i løpet av denne serien. I en ny fil legg til følgende kode:

Lagre dette i js mappe som app.js. Vi legger all vår kode i en anonym funksjon som vi påberoper umiddelbart, aliasing jQuery som $ karakter. Også definert på dette stadiet er en rekke objekter der hvert objekt representerer en kontakt.

Vi bruker denne lokale datalageren for denne delen av opplæringen, da det gir oss mulighet til å få noen skript oppe og går uten å bekymre seg for mye om synkronisering med en server. Vi lagrer det for en annen dag!

modeller

En modell representerer dataene i et program; I vår søknad vil dette være en individuell kontakt, som vil ha attributter som et navn, et kontaktnummer, etc. Du kan si at en individuell modell representerer den atomiske delen av applikasjonen - den minste mulige funksjonaliteten. Legg til følgende kode direkte etter datarammingen:

For å lage en modell i Backbone utvider vi bare Backbone.Model klasse ved hjelp av forlenge() metode. Vi kan sende et objekt inn i metoden som gjør at vi kan tilpasse modellen med vår egen funksjonalitet. En av egenskapene vi kan sette innenfor dette objektet kalles mislighold. Denne egenskapen tillater oss å konfigurere standardverdier for ethvert attributt som vi vil at modellene våre skal ha.

I dette tilfellet setter vi et plassholderbilde som standardverdien til bilde attributt for modellinstanser. Alle modeller som ikke har denne egenskapen når de er definert, vil bli gitt den.

Modeller har andre egenskaper som vi kan bruke for å legge til funksjonalitet; vi kunne definere en initialize () metode, og denne metoden vil bli påkalt automatisk av Backbone for oss når hver modell er initialisert. Vi vil ikke gjøre bruk av dette for øyeblikket, men vær ikke bekymret, vi kommer tilbake til modeller litt senere.

samlinger

En samling er en klasse for å styre grupper av modeller. Vi bruker en enkel i dette eksempelet for å lagre alle våre kontakter. Legg til følgende kode direkte etter Ta kontakt med modell:

Som en modell er en samling en ryggradsklasse som vi strekker for å legge til tilpasset funksjonalitet som er spesifikk for vår søknad. Samlinger har også en forlenge() metode, og det aksepterer et objekt som tillater oss å sette egenskaper av klassen og legge til atferd. Vi bruker modell eiendom for å fortelle samlingen hvilken klasse hvert element i samlingen skal bygges fra, som i dette tilfellet er en forekomst av vår Ta kontakt med modell. Ikke bekymre deg for at klassene vi har definert så langt, virker svært enkle, vi kommer tilbake og legger til flere funksjoner i senere deler av opplæringen.

Visninger

Visninger er ansvarlige for å vise dataene i programmet på en HTML-side. En av fordelene ved å skille ut delene av applikasjonen som behandler dataene og delene som viser dataene, er at vi veldig enkelt kan gjøre en endring til en uten å kreve omfattende endringer i den andre. Vi bruker et par visninger i vår søknad, den første som skal legges direkte etter Directory klasse:

Denne visningen håndterer å vise en individuell kontakt. På samme måte som modeller og samlinger, har visninger en forlenge() metode som brukes til å forlenge Backbone.View klasse. Vi setter flere forekomstegenskaper i vårt syn; de TagNavn Egenskapen brukes til å spesifisere beholderen for visningen og klassenavn egenskaper angir et klassenavn som er lagt til denne beholderen. Vi bruker en enkel mal i vår HTML-fil for å gjengi hver kontakt, slik at mal Eiendom lagrer en bufret referanse til malen, som vi velger fra siden ved hjelp av jQuery.

Neste definerer vi en render () funksjon; Denne funksjonen påberopes ikke automatisk av Backbone, og mens vi kunne kalle den fra den automatisk påkalte initialize () Metode for å gjøre synet selvtillit, vi trenger ikke i dette tilfellet.

Innen render () Metode vi lagrer en referanse til Underscore er mal() metode og send det til den lagrede malen. Når passerer et enkelt argument som inneholder en mal Underscore påkaller det ikke umiddelbart, men returnerer en metode som kan kalles for å faktisk gjøre malen.

element opprettet av visningen til den interpolerte malen ved hjelp av jQuery's html () metode for enkelhets skyld. Dette gjøres ved å ringe den templerende funksjonen som Underscore returnerte tidligere, og overføre dataene til interpolering. Dataene er hentet fra modellen ved hjelp av Backbone toJSON () metode på modellen. Interpolering betyr bare at tokens i malen er erstattet med faktiske data. Legg merke til at vi bruker $ el å angi HTML-innholdet; Dette er et cached-jQuery-objekt som representerer det nåværende elementet, slik at vi ikke trenger å fortsette å lage nye jQuery-objekter.

På slutten av render () metode, vi returnerer dette objekt, som peker på visningseksemplet at render () Metoden er påkalt. Dette er slik at vi kan koble andre Ryggradsmetoder til visningseksemplet etter å ha ringt det render () metode.

Micro Templating Med Underscore

Nå vil det nok være en passende tid å se på Underscore's innebygde mikro-templerende egenskaper. Underscore gir mal() metode som vi så for å konsumere og interpolere maler. Til HTML-siden skal vi legge til malen som vi skal bruke; Legg til følgende kode direkte etter kontaktbeholderen

Vi bruker en > element med en id attributt slik at vi enkelt kan velge den og en egendefinert type Tilordne slik at nettleseren ikke forsøker å utføre den. Innenfor malen spesifiserer vi HTML-strukturen vi vil bruke, og bruker tokens for å spesifisere hvor modelldata skal settes inn. Det finnes et par andre funksjoner vi kan benytte oss av med Underscore, inkludert interpolering av HTML-rømte verdier, eller utførelse av vilkårlig JavaScript, men vi trenger ikke å benytte disse for å få denne opplæringen.

 
 En mestervisning
 For å fullføre denne delen av opplæringen skal vi lage en ny visning. Vår nåværende visning representerer hver enkelt kontakt, slik at den er kartlagt til en modell på 1: 1-basis. Men denne visningen er ikke selvgjenvinning, og vi har ikke påberegnet det enda. Det vi trenger er en visning som kartlegger 1: 1 i vår samling, en hovedvisning som gir det riktige antall kontaktvisninger for å vise hver av våre kontakter. Direkte etter ContactView, legg til følgende klasse:
 var DirectoryView = Backbone.View.extend (el: $ ("# kontakter"), initialiser: funksjon () this.collection = new Directory (kontakter); this.render ();, render: function ()  var det = dette; _.each (this.collection.models, funksjon (item) that.renderContact (item);, dette); renderContact: funksjon (item) var contactView = ny ContactView (model: element); dette. $ el.append (contactView.render (). el););
 Denne visningen blir festet til et element som allerede finnes på siden, den tomme beholderen som er hardkodet inn i , så vi velger elementet med jQuery og setter det som el eiendom. Når da definere en enkel initialize () funksjon som skaper en forekomst av vår samlingsklasse og deretter kaller sin egen render () metode, slik at denne visningen blir selvgjengivende.
 Vi definerer deretter render () metode for vår hovedvisning. Innenfor funksjonen lagrer vi en referanse til visningen slik at vi kan få tilgang til den innen en tilbakeringingsfunksjon, og deretter bruke Underscore s Hver() metode for å iterere over hver modell i vår samling.
 Denne metoden aksepterer to argumenter (i dette skjemaet, selv om det også kan brukes med bare ett argument); den første er samlingen av gjenstander for å iterere over, den andre er en anonym funksjon som skal utføres for hvert element. Denne tilbakeringingsfunksjonen aksepterer gjeldende element som et argument. Alt vi gjør innen denne tilbakeringingsfunksjonen er å ringe til renderContact () metode og send det til det nåværende elementet.
 Til slutt definerer vi renderContact () metode. I denne metoden oppretter vi en ny forekomst av vår ContactView klasse (husk, den ContactView klassen representerer en individuell kontakt) og setter sin modell Eiendommen til varen gikk inn i metoden. Vi legger deretter til elementet som er opprettet ved å ringe visningen render () metode til $ el eiendom av DirectoryView mastervisning (den tomme beholderen vi valgte fra siden). De $ el Egenskapen er et hurtigbufret jQuery-objekt som Backbone skaper for oss automatisk.
 Mestervisningen er ansvarlig for å generere hver enkelt modell i vår samling. Alt vi trenger å gjøre er å initialisere vår hovedvisning, og fordi det er selvgjengivelse, vil det vise alle kontaktene som er angitt i rekke dummy-data:
 var directory = new DirectoryView ();
 Når vi kjører denne siden i en nettleser nå, bør vi se en visuell fremstilling av våre data:
  Ryggraden lager en forekomst av en modell for hvert element i vårt originale utvalg, som er lagret i vår samling og gjengitt som en forekomst av en visning.
 Denne opplæringen handler ikke om CSS, så jeg har ikke dekket eksemplet CSS i det hele tatt. Det er bare grunnleggende CSS, hvis du er nysgjerrig, ta en titt på stilarket som følger med i demoarkivet.
 
 Sammendrag
 I denne delen av opplæringen har vi blitt introdusert til noen av kjernekomponentene i Backbone.js; modeller, samlinger og visninger. Modeller er klasser som vi kan opprette for å lagre data om en bestemt ting og definere atferd for den. Samlinger brukes til å administrere grupper av modeller og visninger lar oss gjengi våre modeller ved hjelp av interpolerte maler som viser dataene fra våre modeller.
 I neste del av opplæringen tar vi en titt på hvordan vi kan filtrere samlingen vår for å vise bare en delmengde av modellene våre. Vi vil også se på en annen viktig komponent i Ryggraden.



		
			
	   
	




Kode