Indholdsfortegnelse
I øjeblikket ved vi, at synspunkterne i Backbone.js De arbejder med logikken i, hvordan man præsenterer de oplysninger, der er struktureret med modellen, spørgsmålet opstår om, hvordan vi udtrykker dette i vores ansøgning, hvad vi gør er at arbejde med elementerne i DOM træ så vi kan indsætte ved Javascript det forskellige indhold i vores skabelon.For at nå disse mål har vi elementet "det" som refererer til navnet på DOM -element som vi har identificeret vores del af synet med.
Hvad er"?
Dette element er den centrale komponent eller ejendom i vores opfattelse, da det er henvisningen til DOM -element at det er obligatorisk at synspunkterne har. Visninger bruger "det" som den egenskab, som vi sammensætter indholdet med, og som derefter vil blive indsat i DOM.
Der er to måder, hvorpå vi kan knytte en DOM -element med synet, den først opretter en ny og tilføjer den til DOM og anden refererer til en eksisterende på siden.
Oprettelse af et nyt elementHvis vi vil oprette et nyt element, skal vi bruge egenskaberne: tagName, id og classNamepå denne måde vil rammen stå for at skabe det nye element for os, og en henvisning til elementet vil være tilgængelig i ejendommen "den", i tilfælde af at vi forlader tagName tom som standard vil blive oprettet som en div.
Lad os se følgende kode, hvor vi kan sætte pris på det, vi har lært hidtil:
var TasksView = Backbone.View.extend ({tagName: 'ul', // er påkrævet, men hvis vi lader det stå tomt, tages det som div className: 'container', // det er valgfrit, men vi kan tildele flere klasser -id: 'opgave', // valgfri}); var TasksView = ny TasksView (); console.log (taskView .el); // vil udskriveSom vi kan se, skaber vi en visning på en grundlæggende måde ved at udvide eller arve fra Backbone.View, så tildeler vi dem med de nævnte egenskaber en værdi, endelig instantierer vi med en console.log () vi ser resultatet.
I det følgende billede kan vi illustrere, hvordan dette ser ud i vores Chrome -konsol:
- som vi havde specificeret i vores view build.
SetElement -metode
Denne metode bruges, når vi vil anvende visningen på et andet DOM -element, der allerede findes, så vil det oprette en ny reference $ den, som ikke vil blive knyttet til det originale element, men vil pege på det nye, alt dette afhængigt af den begivenhed, vi kalder.
Lad os se i følgende kode, hvordan vi anvender dette:
// Vi opretter to DOM -elementer, der repræsenterer knapper 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 opretter en forekomst af visningen og anvender den på button1 -elementet // på button1 var view = ny visning ({el: button1}); // Nu anvender vi visningen på elementet button2 med metoden setElement view.setElement (button2); button1.trigger ('klik'); button2.trigger ('klik'); Dette bør returnere en sand værdi, når vi udfører begivenheden på button2 element Siden visningen blev ændret til den, lad os se det billede, der henviser til ovenstående forklaret for at afslutte selvstudiet:
