Gjør ryggraden bedre med utvidelser

Ryggraden blir stadig populær som et webapplikasjonsutviklingsramme. Sammen med denne populariteten kommer utallige utvidelser og plugins for å forbedre kraften i rammen, og fylle hull som andre følte nødvendig å fylle. La oss ta en titt på noen av de beste valgene.

Backbone.Marionette

Utviklet av Derick Bailey, denne utvidelsen er ganske stor og er min personlige favoritt. I stedet for å legge til en eller to funksjoner til Backbone, besluttet Derick å fylle ut alle de største hullene som han følte eksisterte. Her er hva han sier om det i readme-filen til GitHub-prosjektet.

"Backbone.Marionette er et kompositt applikasjonsbibliotek for Backbone.js som tar sikte på å forenkle konstruksjonen av store JavaScript-applikasjoner. Det er en samling av vanlige design- og implementeringsmønstre funnet i programmene jeg (Derick Bailey) har bygd med Backbone , og inkluderer ulike stykker inspirert av sammensatte applikasjonsarkitekturer, for eksempel Microsofts "Prism" -ramme. "

La oss ta en nærmere titt på hva Marionette gir oss med:

Applikasjon: Dette er et sentralt objekt som alt i søknaden din kan kommunisere gjennom. Det gir en måte å sette opp hovedvisningen (e) av søknaden din raskt og enkelt, en sentral hub som alle moduler i søknaden din kan kommunisere gjennom, slik at de ikke er avhengige av hverandre, og initiatorer for finkornet kontroll av hvordan søknaden din starter opp.
moduler: Et middel til å inkapslere modulkoden og navngitte de modulene på det sentrale programobjektet.
Visninger: Nye visningsklasser for å utvide tilbudet med innfødte metoder for opprydding, slik at du ikke ender opp med minnelekkasjer. Den inneholder også gjengivelse kjeleplate; For enkle visninger, angi bare malen og modellen, og den vil håndtere resten.
Samling / Sammensatt Visninger: Dette er hvor "kompositt applikasjonsbibliotek" -bit kommer inn i spill. Disse to visningene lar deg enkelt lage visninger som kan håndtere prosessen med å gjengi alle visningene i en samling, eller til og med et nestet hierarki av samlinger og modeller, med svært liten innsats.
Regioner og layouter: En region er et objekt som kan håndtere alt arbeidet med gjengivelse, avlevering og avsluttende visninger for et bestemt sted i DOM. En layout er bare en vanlig visning som også har regioner som er bygd inn i den for å håndtere undervisninger.
AppRouter: En ny type ruteren som kan ta en kontroller til å håndtere arbeidsbelastningen, slik at ruteren bare kan inneholde rutens konfigurasjon.
Arrangementer: Utvidet fra Wreqr-prosjektet, gjør Marionette Backbone-hendelser enda sterkere for å skape storstendige hendelsesbaserte applikasjoner.

Jeg har bare skrapet overflaten av hva Marionette kan gjøre. Jeg anbefaler absolutt at du går over til GitHub og leser dokumentasjonen deres på Wiki.

I tillegg dekker Andrew Burgess Marionette i sin Tuts + Premium Advanced Backbone Patterns and Techniques kurs.

Backbone.Validation

Backbone.Validation er designet for å fylle en liten nisje av et problem: nemlig modell validering. Det finnes flere valideringsutvidelser for Backbone, men dette synes å ha fått mest respekt fra samfunnet.

Snarere enn å faktisk skrive en validere Metode for modellene dine, du kan lage en validering Egenskap for modellene dine, som er et objekt som spesifiserer hvert av attributene du vil validere, og en liste over valideringsregler for hvert av disse attributter. Du kan også angi feilmeldinger for hvert attributt og passere i tilpassede funksjoner for å validere et enkelt attributt. Du kan se et eksempel nedenfor, som er endret fra et av eksemplene på deres hjemmeside.

 var SomeModel = Backbone.Model.extend (validering: navn: required: true, 'address.street': obligatorisk: true, 'address.zip': lengde: 4, alder: [1, 80], epost: mønster: 'epost', // leverer din egen feilmelding msg: "Vennligst skriv inn en gyldig e-postadresse", // tilpasset valideringsfunksjon for 'someAttribute' someAttribute: funksjon if (value! == 'somevalue') return 'Feilmelding';));

Det finnes utallige innebygde validatorer og mønstre som du kan sjekke imot, og det er enda en måte å utvide listen med dine egne globale validatorer. Dette Backbone-pluginet gjør ikke riktig valideringsmoro, men eliminerer absolutt noen unnskyldninger for ikke å legge til i validering. Vennligst besøk deres nettsted for flere eksempler og en dypere forklaring på hvordan du bruker dette fantastiske verktøyet.

Backbone.LayoutManager

Backbone.LayoutManager handler om å gjøre Backbone's Views bedre. Som Backbone.Marionette, bringer den inn oppryddingskode for å hindre hukommelse lekkasjer, håndterer alle kjeleplater, og gir deg bare konfigurasjons- og applikasjonsspesifikk kode. I motsetning til Marionette fokuserer LayoutManager spesielt på Visninger.

Fordi LayoutManager fokuserer utelukkende på visninger, kan det gjøre mer for visningene enn Marionette gjør. LayoutManager kan for eksempel gjøre asynkron gjengivelse, i tilfelle du vil dynamisk laste inn maler fra eksterne filer.

LayoutManager kan også håndtere undervisninger, men på en helt annen måte fra Marionette. Uansett er det i stor grad konfigurasjon, noe som gjør ting ekstremt enkelt og eliminerer 90% av arbeidet du måtte ha gjort, hvis du prøvde å implementere alt dette på egen hånd. Ta en titt nedenfor for et enkelt eksempel for å legge til tre undervisninger til en visning:

 Backbone.Layout.extend (views: "header": ny HeaderView (), "section": ny ContentView (), "footer": ny FooterView ());

Som vanlig, se på GitHub-siden og dokumentasjonen for å lære mer.

Backbone.ModelBinder

Backbone.ModelBinder lager koblinger mellom dataene i modellene dine og markeringen som vises av dine synspunkter. Du kan allerede gjøre dette ved å binde til endringshendelsen på modellene dine og gjengi visningen igjen, men ModelBinder er mer effektiv og enklere å bruke.

Ta en titt på koden nedenfor:

 var MyView = Backbone.View.extend (mal: _.template (myTemplate), initialiser: funksjon () // Old Backbone.js måte this.model.on ('change', this.render, this); / / eller den nye Backbone 0.9.10 + måten this.listenTo (this.model, 'change', this.render);, render: function () this. $ el.html (this.template (this.model. tilJSON ())););

Problemet med denne tilnærmingen er at når en enkelt attributt er endret, må vi gjenta hele visningen. Også, med hver gjengivelse, må vi konvertere modellen til JSON. Til slutt, hvis vil bindingen være bi-directional (når modelloppdateringene, så gjør DOM og vice versa), må vi legge til enda mer logikk til visningen.

Dette eksemplet brukte Underscore's mal funksjon. La oss anta at malen vi passerte inn i, ser slik ut:

  Fornavn  Etternavn

Bruke taggene <%= og %> lage mal funksjon erstatte disse områdene med fornavn og etternavn Egenskaper som eksisterer i JSON som vi sendte inn fra modellen. Vi antar at modellen har begge disse egenskapene også.

Med ModelBinder, i stedet kan vi fjerne de templerende kodene og sende inn normalt HTML. ModelBinder vil se verdien av Navn attributt på inngang tag, og vil automatisk tildele modellens verdi for den egenskapen til verdi attributten til taggen. For eksempel, den første inngang's Navn er satt til "firstName". Når vi bruker ModelBinder, vil det se det og deretter sette det inngang's verdi til modellens fornavn eiendom.

Nedenfor ser du hvordan vårt tidligere eksempel ville se etter å bytte til bruk av ModelBinder. Også innse at bindingen er toveis, så hvis inngang Etiketter oppdateres, modellen oppdateres automatisk for oss.

HTML-mal:

  Fornavn  Etternavn

JavaScript-visning:

 var MyView = Backbone.View.extend (mal: myTemplate, initialiser: funksjon () // Ikke mer bindende her, gjengiv: funksjon () // Kast HTML-koden i denne. $ el.html (dette .template); // Bruk ModelBinder til å binde modellen og se modelBinder.bind (this.model, this.el););

Nå har vi rene HTML-maler, og vi trenger bare en enkelt linje med kode for å binde visningens HTML og modellene sammen modelBinder.bind. modelBinder.bind tar to nødvendige argumenter og ett valgfritt argument. Det første argumentet er modellen med dataene som vil bli bundet til DOM. Den andre er DOM-noden som vil bli rekursivt traversert, søker etter bindinger å lage. Det endelige argumentet er a bindende objekt som angir avanserte regler for hvordan bindinger skal gjøres, hvis du ikke liker standardbruken.

ModelBinder kan brukes på mer enn bare inngang tags. Det fungerer på ethvert element. Hvis elementet er en type formularinngang, for eksempel inngang, å velge, eller textarea, Det vil oppdatere verdiene til elementet, tilsvarende. Hvis du binder til et element, for eksempel a div eller span, den vil plassere modellens data mellom åpnings- og lukkekoder for det elementet (f.eks. [data går her]).

Det er mye mer kraft bak Backbone.ModelBinder enn det jeg har demonstrert her, så vær sikker på at du leser dokumentasjonen på GitHub-depotet for å lære alt om det.

Konklusjon

Det bryter opp ting. Jeg har bare dekket en håndfull utvidelser og plugins, men dette er det jeg anser for å være mest brukbare.

Ryggraden landskapet er i stadig endring. Hvis du vil se en omfattende liste over de forskjellige Backbone-utvidelsene som er tilgjengelige, kan du besøke denne wikisiden, som Backbone-teamet regelmessig oppdaterer.

Kode