Innholdsfortegnelse
Backbone.js Den er basert på MVC -strukturen, i tillegg til å ha Modeller, også har visningerI følge filosofien til denne programvarekonstruksjonsarkitekturen er visningene de som har ansvaret for å vise brukeren dataene som genereres mellom kontrolleren og modellen, avhengig av forespørselen som er kommet.I Backbone.js dette fungerer litt annerledes, utsikten inneholder ikke elementer som brukeren ser direkte, men kommuniserer heller dataene gjennom en malmotor.
Visningene i Backbone.js
I Backbone.js visningene som sådan inneholder ikke HTML -språk som kan vises for brukeren av applikasjonen vår, tvert imot inneholder de logikken som lar oss bygge driften av den fremre delen av applikasjonen som vi utvikler ved å bruke modellen som en base, det vil si det vi har i modellen vi skal manipulere det i visningen og dermed ha to handlingsnivåer.
For å vise data bruker vi render () metode som lar oss overføre dataene fra vårt syn til en mal, sa malen er bygget i en eller annen motor av Javascript -maler for eksempel: Understreking, bart, Jquery-tpml, etc..
Se skapelsen
Til lage en visning Vi følger en ganske direkte prosess og ligner på opprettelsen av en modell, for å generere utsikten vi bare trenger å strekke oss fra Backbone.View, la oss se hvordan dette oppfører seg når vi kjører det på vår krom konsoll ved hjelp av en HTML -fil med bibliotekene til Backbone.js, jsquery Y understrek allerede lastet.
La oss først se koden som vi vil plassere i konsollen vår:
var TodoView = Backbone.View.extend ({tagName: 'li', // Lagre malfunksjonen for et enkelt element. todoTpl: _.template ("Et eksempel på en mal"), hendelser: {'dblclick label': 'edit ',' keypress .edit ':' updateOnEnter ',' blur .edit ':' close '}, // Regenerere bildetekstene på elementets etikett. render: function () {this. $ el.html (this.todoTpl ( this.model.toJSON ())); this.input = this. $ ('. edit'); returner denne;}, edit: function () {// Den utføres når du er ferdig dobbeltklikker du på} -taggen, lukker : function () {// den kjøres når fokus er fjernet fra elementet}, updateOnEnter: funksjon (e) {// den utføres når en tast trykkes mens den er i redigeringsmodus, // men vent til enter er trykket for å gå til handling}});
Som vi kan se, etter at vi har gjort det forlenge tilsvarende initialiserer vi en rekke attributter som får vårt syn til å fungere, i tillegg legger vi i hvert element kommentarene slik at vi vet hvordan det fungerer.
La oss nå se i konsollen hva som skjer når vi kaller visningen:
ViktigNår du ringer elementet i console.log () hva vi gjorde med objektet som vi øyeblikkelig ut fra vårt syn, det vi gjør er å skrive ut DOM -element tilsvarende, på denne måten er at våre synspunkter kan komponere elementene deres og dermed settes inn umiddelbart i DOM -tre av maldokumentet.
Med dette avslutter vi denne opplæringen som vi allerede har tatt et skritt fremover i som tilsvarer generering av visninger i en MVC -applikasjon ved hjelp av Backbone.js.Likte og hjalp du denne opplæringen?Du kan belønne forfatteren ved å trykke på denne knappen for å gi ham et positivt poeng