Innehållsförteckning
För närvarande vet vi att åsikterna i Backbone.js De arbetar med logiken för hur man presenterar informationen strukturerad med modellen, frågan uppstår hur vi uttrycker detta i vår applikation, vad vi gör är att arbeta med elementen i DOM -träd så att vi kan infoga med Javascript det olika innehållet i vår mall.För att uppnå dessa mål har vi elementet "de" som hänvisar till namnet på DOM -element som vi har identifierat vår del av sikten med.
Vad är"?
Detta element är den centrala komponenten eller egenskapen i vår åsikt, eftersom det är referensen till DOM -element att det är obligatoriskt att synpunkterna har. Visningar använder "de" som egenskapen som vi komponerar innehållet med och som sedan kommer att införas i DOM.
Det finns två sätt på vilka vi kan associera en DOM -element med sikten, den först skapar en ny och lägger till den i DOM och andra refererar till en befintlig på sidan.
Skapa ett nytt elementOm vi vill skapa ett nytt element måste vi använda egenskaperna: tagName, id och classNamepå detta sätt kommer ramarna att ansvara för att skapa det nya elementet för oss och en referens till nämnda element kommer att finnas tillgänglig i egendom "den", i händelse av att vi lämnar taggnamn tom som standard skapas som en div.
Låt oss se följande kod där vi kan uppskatta det vi har lärt oss hittills:
var TasksView = Backbone.View.extend ({tagName: 'ul', // krävs men om vi lämnar det tomt tas det som div className: 'container', // det är valfritt men vi kan tilldela flera klasser -id: 'uppgif.webpt', // valfritt}); var TasksView = new TasksView (); console.log (taskView .el); // kommer att skriva utSom vi kan se skapar vi en vy på ett grundläggande sätt genom att förlänga eller ärva från Backbone.View, sedan med de nämnda egenskaperna tilldelar vi dem ett värde, slutligen instansierar vi med en console.log () vi ser resultatet.
I följande bild kan vi illustrera hur detta ser ut i vår Chrome -konsol:
- som vi hade specificerat i vår vy bygga.
SetElement -metod
Denna metod används när vi vill tillämpa vyn på ett annat DOM -element som redan finns, då skapar det en ny referens $ den, som inte kommer att fästas på det ursprungliga elementet utan kommer att peka på det nya, allt detta beroende på den händelse vi kallar.
Låt oss se i följande kod hur vi tillämpar detta:
// Vi skapar två DOM -element som representerar knapparna var button1 = $ (''); var button2 = $ (''); // Vi definierar en ny vy var View = Backbone.View.extend ({events: {click: function (e) {console.log (view.el === e.target);}}}); // Vi skapar en instans av vyn och tillämpar den på knapp1 -elementet // på knapp1 var vy = ny vy ({el: knapp1}); // Nu applicerar vi vyn på elementet button2 med metoden setElement view.setElement (button2); button1.trigger ('klick'); button2.trigger ('klick'); Detta bör returnera ett verkligt värde när vi kör händelsen på knapp2 -element Eftersom vyn ändrades till den, låt oss se bilden som hänvisar till ovanstående förklarade för att avsluta handledningen:
