Ryggradssyn og DOM

Hva du skal skape

Oversikt

Ryggradssyn gir en nyttig konvensjon og abstraksjon for brukergrensesnitt. Men for å inkludere brukergrensesnittfunksjonalitet i appen din, at Backbone i seg selv ikke var utformet for å støtte, må du vurdere hvordan du effektivt kan integrere tilpasset eller tredjepartsfunksjonalitet i Backbone-appen din. Som et resultat må utviklere navigere utfordringer og unngå vanskelige konflikter mellom de eksterne biblioteker og Backbone.

Intro til Backbone.js

Ryggraden er en fantastisk måte å organisere klientens side kode på. Med abstraksjoner som modeller, visninger og samlinger, hjelper Backbone seriøse utviklere skrive velorganiserte, skalerbare applikasjoner. 

Selv om det finnes mange alternativer til Backbone, inkludert Angular and Ember, gir Backbone utviklere en utrolig frihet til å skrive og organisere koden sin på naturlige og behagelige måter uten å være overbevist om hva dokumentobjektmodellen (DOM) ser ut som.

Den Skinny on Backbone Views

Visninger er en av de mest kraftige og fleksible komponentene i Backbone. Ifølge forfatterne av Backbone:

Backbone-visninger er nesten mer konvensjon enn de er kode - de bestemmer ikke noe om HTML eller CSS for deg, og kan brukes sammen med et JavaScript-templerende bibliotek.

De er vant til å manipulere hva brukerne ser i nettleseren, og de letter kommunikasjon med modeller. Som et resultat, i paradigmet til Model View-Controller, er det nyttig å tenke på Backbone Views som både visning og kontroller.

Dette har alvorlige implikasjoner når man utvikler applikasjoner med betydelig brukerinteraksjon. Faktisk er det mange situasjoner hvor du kanskje vil bruke et annet bibliotek til å manipulere DOM. Datavisualisering og nettbasert spilling er to eksempler, hvor du kanskje foretrekker å ha et annet bibliotek, håndtere noen av dine brukervendte visningsvisninger. Som et resultat kan du vurdere å bruke jQuery, d3.js, crossfilter eller three.js for noen av DOM-manipulasjonsbehovene dine.

Heldigvis finnes det måter å få Backbone til å spille fint med disse andre DOM-manipulatorene.

Manipulere dokumentobjektmodellen i ryggraden

Før vi kommer inn i det, la oss se på DOM-manipulering i Backbone. La oss starte med et grunnleggende visningsobjekt.

var SomeView = Backbone.View.extend (// Noen definisjon ting her); var aView = ny SomeView ();

Flott. La oss nå fortelle hvordan du gjengir deg ved å definere en .render () metode.

var SomeView = Backbone.View.extend (// definere hvordan å gjengi noe gjengi: funksjon () // få noen HTML var htmlContent = "
Dette noen HTML som vil bli satt inn i DOM
"; // sette inn html denne. $ el.html (htmlContent); // returnere en forekomst av objektet for kjetting returnerer dette;);

Det skjer flere ting her, så la oss ta det trinnvis.

Definere en .render () Metode

Først definerer vi a .render () metode som inkapsler logikken som er nødvendig for å gjengi HTML. Legg merke til at Ryggraden kommer med en .render () metode ut av esken. Men det gjør ikke noe. Den ble designet for å bli overskrevet med tilpasset logikk!

Få HTML-innhold

Eksemplet ovenfor antar at du får HTML et sted. Du kan bruke understrekinger _.mal(). Alternativt kan vi bruke andre templerende biblioteker, som Handlebars (min personlige favoritt). Alt som virkelig betyr noe er at vi på en eller annen måte får litt HTML-innhold.

Hva helvete er el?

Vi trenger et sted for å sette HTML-innholdet; det er hva el er for. Som .render (), el er et attributt som kommer med Backbone Views ut av boksen. Det refererer til HTML-elementet (og alle dets barn) som er inkludert i denne visningen. I eksemplet ovenfor spesifiserte vi ikke el. Som standard, el er en div. Vi kunne imidlertid enkelt sette foreldreelementet slik:

var SomeView = Ryggraden.View.extend (el: "artikkel", ...); var aView = ny SomeView (); console.log (aView.el); // et tomt "artikkel" HTML-element

Det er også $ el, som bare er el innpakket i jQuery. Vi ser det senere $ el spiller en stor rolle i å mestre Backbone-visninger.

retur dette...

Til slutt returnerer vi en referanse til selve objektet for å tillate kjetting. Selv om det ikke er strengt nødvendig, returnerer dette er en konvensjon. Uten returnere dette, Vi trenger noen måte å få tilgang til elementets HTML-innhold. Følgende kode illustrerer en alternativ løsning.

/ ** * Hvis gjengivelse () returnerer ingenting, er vi virkelig * tilgang til "el" -egenskapen av udefinert, som ikke eksisterer! * / aView.render (). el; // Skal kaste en feil // Prøv å få tilgang til HTML console.log (aView.el); // Skal være tomt (men definert!) // legg til HTML til DOM av 'aView' aView.render (); // Prøv å få tilgang til HTML-en på nytt console.log (aView.el) // Skal inneholde HTML-en

Uhh, ingenting er på skjermen!

Godt poeng. Selv om vi ringte .render (), Det er ikke noe på skjermen - det som gir?

Det er fordi vi ikke har samhandlet med DOM ennå. Alt vi gjorde var å generere litt HTML og representere det i et JavaScript-objekt som heter en utsikt. Siden vi nå har tilgang til den genererte HTML, er alt vi trenger å gjøre ved å legge til eller sette inn HTML-koden i webappens DOM.

For å flytte ting sammen, vil vi også sette opp en mini-app slik at visningen vises når siden lastes. Nedenfor er hva HTML og JavaScript skal se ut.

Grunnleggende HTML-oppsett

Her er hva som skjer i App.js

// Opprett en visning var SomeView = Backbone.View.extend (initialiser: funksjon () , gjengiv: funksjon () var someHTML = "
Dette er noen HTML
"; dette. $ el.html (someHTML); returner dette;; // Opprett en ruter var Router = Ryggrad.Router.extend (// definer ruteruter: " ":" home ", Hjem: funksjon () var aView = ny SomeView (); $ ('.app'). html (aView.render (). el);); // Instant ruteren din nye ruter sporingshistorikk Backbone.history.start ();

Gå til din lokale server / nettleser, last opp siden, og søknaden din skal kjøre!

Bruke Ryggrad og jQuery samtidig

Ryggradens fleksibilitet gjør at bruken av tredjepartsbiblioteker kan manipulere DOM. Ett scenario er når du vil bruke jQuery og Backbone samtidig for å manipulere visningene dine. Nedenfor er et oppdatert eksempel.

var SomeView = Backbone.View.extend (// Manipuler DOM indirekte ved å lage HTML-innhold i en // Ryggrad Vis gjengivelse: funksjon () var someHTML = "
Noen HTML
"; dette. $ el.html (someHTML); returner dette;, // Manipuler DOM direkte fra Ryggraden Vis renderWithJQuery: funksjon () var otherHTML ="
Annen HTML
"; $ ('. app'). append (otherHTML); // kan ikke være fornuftig å returnere 'this', // en annen gjengivelsesmetode, for å holde ting interessante specialRender: function () this. $ ('. tom "). føye ("Ikke lenger tomt!); returnere dette;; // Senere i appen din ... // lage visningen var aView = ny SomeView (); // endre DOM for å gjenspeile den nyopprettede visningen $ ('.app'). html (aView.render (). el); // legge til mer innhold direkte til DOM ved hjelp av jQuery innen // et ryggradsvisning objekt aView.renderWithJQuery ();

Koden ovenfor vil resultere i to avsnitt på siden. Første ledd inneholder "Noen HTML". Det andre avsnittet inneholder "annen HTML".

For å teste din forståelse av dette, reverserer metoden slik:

// SomeView er allerede definert var aView = ny SomeView (); aView.renderWithJQuery (); $ ( 'App') html (aView.render () el.).;

Koden ovenfor vil resultere i ett avsnitt: "Noen HTML". I begge tilfeller er det også a 

element med ingenting i det. Vi diskuterer dette i et øyeblikk.

Manipulere DOM i ryggradssynninger effektivt

Forståelse av magien med effektiv DOM-manipulasjon (og traversal) krever en forståelse av dette. $ el og dette. $ (). Ved bruk av dette. $ el, Vi vurderer DOM-manipulering til innholdet i visningen. Ved bruk av dette. $ (), vi scoping DOM traversal til DOM treet i visningen.

Som et resultat, i ryggraden konteksten, noen bruksområder av $ () (i stedet for dette. $ ()) kunne være ineffektiv. For eksempel, la oss si at vi ønsket å krysse DOM for å finne noe element. Vi kan bruke noen av de vanlige DOM-traversalmetodene, inkludert .finne(), .barn (), .nærmeste (), .først(), og så videre.

Hvis vi vet, a priori at elementet vi søker ligger et eller annet sted i visningens DOM, bør vi bruke dette. $ () for å unngå å søke et større DOM-trekk i unødvendig grad. Hvis elementet vi søker ligger utenfor utsikten er DOM, må vi bruke $ ().

For eksempel, .specialRender () Metoden bruker lokalisert DOM-traversal for å sikre at vi søker etter elementer med klassen tømme innenfor rammen av visningen. Hvis det er funnet, setter det HTML-innholdet til elementene for å inkludere en span og teksten "Ikke lenger tom".

Konklusjon

I denne artikkelen har vi vurdert Backbone-visninger, diskutert hvordan du gjør Backbone-visninger i DOM, og utforsket hvordan du gjør Backbone til å spille pent sammen med andre biblioteker du kanskje vil bruke til å manipulere DOM. Vi lærte også om lokalisert DOM-traversal og identifiserte metoder for effektivt og ineffektivt å krysse DOM.

Den neste delen av denne artikkelen vil dype dypere inn i mer kompliserte eksempler på å få flere biblioteker til å jobbe sammen i å manipulere DOM.