Backbone.js - Vizualizări

Backbone.js Se bazează pe structura MVC, pe lângă faptul că are Modele, are deasemenea vederiConform filosofiei acestei arhitecturi de construcție software, vizualizările sunt acelea care au responsabilitatea de a arăta utilizatorului datele generate între controler și model în funcție de cererea care a fost făcută.
În Backbone.js acest lucru funcționează puțin diferit, vizualizarea nu conține elemente pe care utilizatorul le vede direct, ci mai degrabă comunică datele printr-un motor de șabloane.
Vizualizările din Backbone.js
În Backbone.js vizualizările ca atare nu conțin limbaj HTML care poate fi afișat utilizatorului aplicației noastre, dimpotrivă conțin logica care ne va permite să construim funcționarea părții frontale a aplicației pe care o dezvoltăm folosind modelul ca o bază, adică ceea ce avem în model, o vom manipula în vedere, având astfel două niveluri de acțiune.
Pentru a afișa date vom folosi metoda render () care ne permite să transmitem datele din vizualizarea noastră către un șablon, șablonul menționat este încorporat într-un motor de Șabloane Javascript de exemplu: Subliniere, Moustache, Jquery-tpml etc..
Vizualizați crearea
La creați o vizualizare Urmăm un proces destul de direct și similar cu crearea unui model, pentru a genera punctul de vedere de la care trebuie doar să ne extindem Coloana vertebrală, să vedem cum se comportă acest lucru când îl rulăm pe consolă cromată folosind un fișier HTML cu bibliotecile din Backbone.js, jsquery Da sublinia deja încărcat.
Să vedem mai întâi codul pe care îl vom plasa în consola noastră:

 var TodoView = Backbone.View.extend ({tagName: 'li', // cache funcția șablon pentru un singur element. todoTpl: _.template ("Un exemplu de șablon"), evenimente: {'dblclick label': 'edit ',' keypress .edit ':' updateOnEnter ',' blur .edit ':' close '}, // Regenerați subtitrările etichetei elementului. render: function () {this. $ el.html (this.todoTpl ( this.model.toJSON ())); this.input = this. $ ('. edit'); return this;}, edit: function () {// Se execută când faceți dublu clic pe eticheta}, închideți : funcție () {// se execută când focalizarea este eliminată din element}, updateOnEnter: funcție (e) {// este executată când o tastă este apăsată în timp ce în modul de editare, // totuși, așteptați până când Enter este apăsat pentru a intra în acțiune}}); 

După cum putem vedea, după ce vom face extinde corespunzător, inițializăm o serie de atribute care vor face ca vizualizarea noastră să funcționeze, în plus, în fiecare element plasăm comentariile astfel încât să știm cum funcționează.
Acum să vedem în consolă ce se întâmplă când apelăm vizualizarea:

ImportantCând sunați elementul în console.log () ceea ce am făcut obiectului pe care îl instanțiem din viziunea noastră, ceea ce facem este să imprimăm Element DOM corespunzător, în acest fel, opiniile noastre își pot compune elementele și, astfel, pot fi inserate simultan în Copac DOM a documentului șablon.
Cu aceasta încheiem acest tutorial cu care am făcut deja un pas înainte în ceea ce corespunde generației de vizualizări într-o aplicație MVC folosind Backbone.js.V-a plăcut și ați ajutat acest tutorial?Puteți recompensa autorul apăsând acest buton pentru a-i oferi un punct pozitiv