Backbone.js - El Element

For øyeblikket vet vi at utsikten i Backbone.js De jobber med logikken om hvordan de skal presentere informasjonen strukturert med modellen, spørsmålet oppstår om hvordan vi uttrykker dette i søknaden vår, det vi gjør er å jobbe med elementene i DOM -tre slik at vi kan sette inn ved Javascript det forskjellige innholdet i malen vår.
For å nå disse målene har vi elementet "de" som refererer til navnet på DOM -element som vi har identifisert vår del av synet.
Hva er"?
Dette elementet er den sentrale komponenten eller egenskapen til vårt syn, siden det er referansen til DOM -element at det er obligatorisk at synspunktene har. Visninger bruker "de" som egenskapen som vi komponerer innholdet med, og som deretter vil bli satt inn i DOM.
Det er to måter vi kan knytte a DOM -element med synet, den først lager en ny og legger den til DOM og sekund refererer til en eksisterende på siden.
Opprette et nytt elementHvis vi vil lage et nytt element, må vi bruke egenskapene: tagName, id og classNamepå denne måten vil rammeverket ha ansvaret for å lage det nye elementet for oss, og en referanse til elementet vil være tilgjengelig i eiendommen "den", i tilfelle vi forlater tagName tom som standard vil bli opprettet som en div.
La oss se følgende kode hvor vi kan sette pris på det vi har lært så langt:

 var TasksView = Backbone.View.extend ({tagName: 'ul', // kreves, men hvis vi lar det stå tomt blir det tatt som div className: 'container', // det er valgfritt, men vi kan tildele flere klasser -ID: 'oppgave', // valgfritt}); var TasksView = ny TasksView (); console.log (tasksView .el); // vil skrive ut

Som vi kan se, skaper vi en visning på en grunnleggende måte ved å forlenge eller arve fra Backbone.View, deretter med de nevnte egenskapene tildeler vi dem en verdi, til slutt instantierer vi og med en console.log () vi ser resultatet.
I det følgende bildet kan vi illustrere hvordan dette ser ut i vårt Chrome -konsoll:

Her ser vi hvordan vi kunne generere et element med etiketten

som vi hadde spesifisert i vårt syn bygge.
SetElement -metode
Denne metoden brukes når vi ønsker å bruke visningen på et annet DOM -element som allerede eksisterer, så vil den opprette en ny referanse $ den, som ikke vil bli festet til det opprinnelige elementet, men vil peke på det nye, alt dette avhengig av hendelsen vi kaller.
La oss se i følgende kode hvordan vi bruker dette:


 // Vi lager to DOM -elementer som representerer knappene var button1 = $ (''); var button2 = $ (''); // Vi definerer en ny visning var View = Backbone.View.extend ({events: {click: function (e) {console.log (view.el === e.target);}}}); // Vi lager en forekomst av visningen og bruker den på knapp1 -elementet // til knapp1 var visning = ny visning ({el: knapp1}); // Nå bruker vi visningen på button2 -elementet med metoden setElement view.setElement (button2); button1.trigger ('klikk'); button2.trigger ('klikk'); 


Dette bør returnere en sann verdi når vi utfører hendelsen på knapp2 -element Siden visningen ble endret til det, la oss se bildet som refererer til ovenstående forklart for å fullføre opplæringen:




Likte og hjalp du denne opplæringen?Du kan belønne forfatteren ved å trykke på denne knappen for å gi ham et positivt poeng