Backbone.js - Visualizzazioni

Backbone.js Si basa sulla struttura MVC, oltre ad avere Modelli, ha anche visualizzazioniSecondo la filosofia di questa architettura di costruzione del software, le viste sono quelle che hanno la responsabilità di mostrare all'utente i dati che vengono generati tra il controller e il modello a seconda della richiesta che è stata fatta.
Nel Backbone.js questo funziona in modo leggermente diverso, la vista non contiene elementi che l'utente vede direttamente, ma piuttosto comunica i dati attraverso un motore di template.
Le viste in Backbone.js
Nel Backbone.js le viste in quanto tali non contengono linguaggio HTML che può essere mostrato all'utente della nostra applicazione, anzi contengono la logica che ci permetterà di costruire il funzionamento della parte anteriore dell'applicazione che stiamo sviluppando utilizzando il modello come una base, cioè ciò che abbiamo nel modello lo manipoleremo nella vista avendo così due livelli di azione.
Per visualizzare i dati utilizzeremo il render() metodo che ci consente di passare i dati dalla nostra vista a un modello, detto modello è integrato in un motore di Modelli Javascript per esempio: Underscore, Moustache, Jquery-tpml, ecc.
Visualizza creazione
a creare una vista Seguiamo un processo abbastanza diretto e simile alla creazione di un modello, per generare la vista dobbiamo solo estendere da Backbone.View, vediamo come si comporta quando lo eseguiamo sul nostro console cromata utilizzando un file HTML con le librerie di Backbone.js, jsquery sì sottolineare già caricato.
Vediamo prima il codice che inseriremo nella nostra console:

 var TodoView = Backbone.View.extend ({tagName: 'li', // Memorizza nella cache la funzione del modello per un singolo elemento. todoTpl: _.template ("Un esempio di modello"), events: {'dblclick label ':' edit ',' keypress .edit ':' updateOnEnter ',' blur .edit ':' close '}, // Rigenera le didascalie dell'etichetta dell'elemento. render: function () {this. $ el.html (this.todoTpl ( this.model.toJSON ())); this.input = this. $ ('. edit'); return this;}, edit: function () {// Viene eseguito quando fatto doppio clic sul tag}, chiudi : function () {// viene eseguito quando il focus viene rimosso dall'elemento}, updateOnEnter: function (e) {// viene eseguito quando viene premuto un tasto mentre si è in modalità di modifica, // tuttavia, aspetta finché non viene premuto per entrare in azione}}); 

Come possiamo vedere, dopo aver fatto il estendere corrispondentemente stiamo inizializzando una serie di attributi che faranno funzionare la nostra vista, inoltre in ogni elemento inseriamo i commenti in modo da sapere come funziona.
Ora vediamo in console cosa succede quando chiamiamo la vista:

ImportanteQuando chiami elemento il nel console.log() quello che abbiamo fatto all'oggetto che istanziamo dal nostro punto di vista, quello che facciamo è stampare il elemento DOM corrispondente, in questo modo è che i nostri punti di vista possono comporre i loro elementi e quindi essere inseriti subito nel albero DOM del documento modello.
Con questo concludiamo questo tutorial con il quale abbiamo già fatto un passo avanti in ciò che corrisponde alla generazione di visualizzazioni in un'applicazione MVC utilizzando Backbone.js.Ti è piaciuto e hai aiutato questo Tutorial?Puoi premiare l'autore premendo questo pulsante per dargli un punto positivo