Backbone.js - Visningar

Backbone.js Det är baserat på MVC -strukturen, förutom att ha Modeller, har också vyerEnligt filosofin i denna mjukvarukonstruktion är vyerna de som har ansvaret för att visa användaren data som genereras mellan kontrollenheten och modellen beroende på den begäran som har gjorts.
I Backbone.js detta fungerar lite annorlunda, vyn innehåller inte element som användaren ser direkt, utan kommunicerar snarare data via en mallmotor.
Vyerna i Backbone.js
I Backbone.js vyerna som sådana innehåller inte HTML -språk som kan visas för användaren av vår applikation, tvärtom innehåller de logiken som gör att vi kan bygga driften av den främre delen av applikationen som vi utvecklar med modellen som en bas, det vill säga vad vi har i modellen vi kommer att manipulera den i synen och har därmed två handlingsnivåer.
För att visa data använder vi render () metod som gör att vi kan överföra data från vår vy till en mall, nämnda mall är inbyggd i någon motor av Javascript -mallar till exempel: Understreck, mustasch, Jquery-tpml, etc..
Visa skapelse
Till skapa en vy Vi följer en ganska direkt process och liknar skapandet av en modell för att generera den vy vi bara behöver sträcka oss från Backbone.View, låt oss se hur detta beter sig när vi kör det på vår krom konsol använder en HTML -fil med biblioteken för Backbone.js, jsquery Y understryker redan laddad.
Låt oss först se koden som vi kommer att placera i vår konsol:

 var TodoView = Backbone.View.extend ({tagName: 'li', // Cache mallfunktionen för ett enda objekt. todoTpl: _.template ("Ett exempel på mall"), händelser: {'dblclick label': 'edit ',' keypress .edit ':' updateOnEnter ',' blur .edit ':' close '}, // Regenerera bildtexterna för elementets etikett. render: function () {this. $ el.html (this.todoTpl ( this.model.toJSON ())); this.input = this. $ ('. edit'); returnera detta;}, edit: function () {// Den körs när du är klar dubbelklicka på taggen}, stäng : function () {// den körs när fokus tas bort från elementet}, updateOnEnter: funktion (e) {// den körs när en tangent trycks ned i redigeringsläge, // vänta dock tills enter är intryckt för att gå till handling}}); 

Som vi kan se, efter att vi gjort det förlänga motsvarande initierar vi ett antal attribut som får vår syn att fungera. Dessutom placerar vi kommentarerna i varje element så att vi vet hur det fungerar.
Låt oss nu se i konsolen vad som händer när vi kallar vyn:

ViktigNär du ringer element i i console.log () vad vi gjorde mot objektet som vi instanserar från vår syn, vad vi gör är att skriva ut DOM -element motsvarande, på detta sätt är att våra åsikter kan komponera sina element och därmed infogas direkt i DOM -träd av malldokumentet.
Med detta avslutar vi denna handledning som vi redan har tagit ett steg framåt i vad som motsvarar generering av vyer i en MVC -applikation med Backbone.js.Gillade du och hjälpte denna handledning?Du kan belöna författaren genom att trycka på den här knappen för att ge honom en positiv poäng