Backbone.js - Visninger

Backbone.js Det er baseret på MVC -strukturen, udover at have Modeller, har også visningerIfølge filosofien i denne softwarekonstruktionsarkitektur er visningerne dem, der har ansvaret for at vise brugeren de data, der genereres mellem controlleren og modellen afhængigt af den anmodning, der er blevet fremsat.
I Backbone.js dette fungerer lidt anderledes, visningen indeholder ikke elementer, som brugeren ser direkte, men kommunikerer dataene snarere via en skabelonmotor.
Visningerne i Backbone.js
I Backbone.js visningerne som sådan ikke indeholder HTML -sprog, der kan vises for brugeren af ​​vores applikation, tværtimod indeholder de logikken, der gør det muligt for os at bygge driften af ​​den forreste del af applikationen, som vi udvikler ved hjælp af modellen som en base, det vil sige, hvad vi har i modellen, vi kommer til at manipulere det i visningen og dermed have to handlingsniveauer.
For at vise data vil vi bruge render () metode der giver os mulighed for at videregive data fra vores visning til en skabelon, skabelonen er bygget i en eller anden motor af Javascript -skabeloner for eksempel: Underscore, overskæg, Jquery-tpml osv.
Se skabelse
Til skabe en visning Vi følger en ret direkte proces og ligner oprettelsen af ​​en model for at generere den udsigt, vi kun skal strække os fra Backbone.View, lad os se, hvordan dette opfører sig, når vi kører det på vores krom konsol ved hjælp af en HTML -fil med bibliotekerne af Backbone.js, jsquery Y understrege allerede indlæst.
Lad os først se den kode, vi vil placere i vores konsol:

 var TodoView = Backbone.View.extend ({tagName: 'li', // Gem skabelonfunktionen for et enkelt element. todoTpl: _.template ("Et eksempel skabelon"), begivenheder: {'dblclick label': 'rediger ',' keypress .edit ':' updateOnEnter ',' blur .edit ':' close '}, // Regenerere billedteksterne på elementets etiket. render: function () {this. $ el.html (this.todoTpl ( this.model.toJSON ())); this.input = this. $ ('. edit'); returner denne;}, edit: function () {// Det udføres, når du er færdig, dobbeltklik på tagget, luk : funktion () {// den udføres, når fokus er fjernet fra elementet}, updateOnEnter: funktion (e) {// den udføres, når der trykkes på en tast, mens den er i redigeringstilstand, // vent dog, indtil enter er trykket på for at gå i gang}}); 

Som vi kan se, når vi gør det forlænge tilsvarende initialiserer vi en række attributter, der får vores syn til at fungere, og i hvert element placerer vi kommentarerne, så vi ved, hvordan det fungerer.
Lad os nu se i konsollen, hvad der sker, når vi kalder visningen:

VigtigNår man ringer element i console.log () hvad vi gjorde med objektet, som vi instantiserer fra vores opfattelse, hvad vi gør, er at printe det DOM -element tilsvarende, på denne måde er, at vores synspunkter kan sammensætte deres elementer og dermed indsættes på én gang i DOM træ af skabelondokumentet.
Med dette afslutter vi denne vejledning, som vi allerede har taget et skridt fremad i, hvad der svarer til generering af visninger i en MVC -applikation ved hjælp af Backbone.js.Kan du lide og hjælpe denne vejledning?Du kan belønne forfatteren ved at trykke på denne knap for at give ham et positivt punkt