Backbone.js - Visualizações

Backbone.js É baseado na estrutura MVC, além de possuir Modelos, também tem VisualizaçõesDe acordo com a filosofia desta arquitetura de construção de software, as vistas são aquelas que têm a responsabilidade de mostrar ao usuário os dados que são gerados entre o controlador e o modelo em função da solicitação realizada.
Em Backbone.js isso funciona um pouco diferente, a visualização não contém elementos que o usuário vê diretamente, mas comunica os dados por meio de um mecanismo de modelo.
As visualizações em Backbone.js
Em Backbone.js as visualizações como tal não contêm linguagem HTML que possa ser mostrada ao usuário de nossa aplicação, pelo contrário, contêm a lógica que nos permitirá construir o funcionamento da parte frontal da aplicação que estamos desenvolvendo usando o modelo como uma base, ou seja, o que temos no modelo vamos manipulá-lo na vista tendo assim dois níveis de ação.
Para exibir dados, usaremos o método render () que nos permite passar os dados de nossa visão para um modelo, o referido modelo é construído em algum mecanismo de Modelos Javascript como por exemplo: Sublinhado, bigode, Jquery-tpml, etc..
Ver Criação
Para criar uma vista Seguimos um processo bastante direto e semelhante à criação de um modelo, para gerar a visão que só temos que estender a partir Backbone.View, vamos ver como isso se comporta quando o executamos em nosso console do cromo usando um arquivo HTML com as bibliotecas de Backbone.js, jsquery Y sublinhado já carregado.
Vamos primeiro ver o código que colocaremos em nosso console:

 var TodoView = Backbone.View.extend ({tagName: 'li', // Armazene em cache a função de modelo para um único item. todoTpl: _.template ("Um modelo de exemplo"), eventos: {'dblclick label': 'edit ',' keypress .edit ':' updateOnEnter ',' blur .edit ':' close '}, // Gera novamente as legendas do rótulo do elemento. render: function () {this. $ el.html (this.todoTpl ( this.model.toJSON ())); this.input = this. $ ('. edit'); return this;}, edit: function () {// É executado quando feito clique duas vezes na tag}, feche : function () {// é executado quando o foco é removido do elemento}, updateOnEnter: function (e) {// é executado quando uma tecla é pressionada durante o modo de edição, // no entanto, espere até que o enter seja pressionado para entrar em ação}}); 

Como podemos ver, depois de fazermos o ampliar correspondentemente estamos inicializando uma série de atributos que farão nosso view funcionar, adicionalmente em cada elemento colocamos os comentários para que saibamos como funciona.
Agora vamos ver no console o que acontece quando chamamos o modo de exibição:

ImportanteAo ligar elemento o no console.log () o que fizemos com o objeto que instanciamos de nossa visão, o que fazemos é imprimir o Elemento DOM correspondente, desta forma é que nossas visualizações podem compor seus elementos e, assim, ser inseridas de uma só vez no Árvore DOM do documento modelo.
Com isso concluímos este tutorial com o qual já demos um passo a frente no que corresponde à geração de visualizações em uma aplicação MVC utilizando Backbone.js.Gostou e ajudou este tutorial?Você pode recompensar o autor pressionando este botão para dar a ele um ponto positivo