Una sinfonía en C#

Un pequeño aporte a la comunidad de habla hispana.

Backbonejs: La vista

Qué es la vista?

En ella vamos a mostrar nuestro modelo, en este caso al tratarse de un navegador web será en HTML, y responderá a la interacción del usuario.

Cómo creo una vista con Backbone?

Primero que nada utilizamos el mismo patrón que para crear un modelo, del siguiente modo:

var Vista = Backbone.View.extend({});

y luego para utilizarla

var vista = new Vista();

Definiciones y cosas que tenemos por defecto

Si no hacemos más nada que lo anterior nuestra vista no hace gran cosa, de hecho, no hace nada, lo que acabamos de lograr es extender la clase de Backbone para tener algunos métodos y propiedades (que vamos a usar después) pero en sí, por ahora, no hace mucho

El método render

Este método nos permitirá imprimir nuestra vista sobre algún otro elemento de la página, sin embargo backbone no nos da ninguna definición especial de este método (es decir, nada nos impide ponerle otro nombre) pero es lo más común hacerlo de este modo, vamos a ver una primera implementación

		var Vista = Backbone.View.extend({
			render: function(){
				return this;
			}
		});
				
		var vista = new Vista();
		
		$("#container").append(vista.render().el);	

Como vemos no hay nada especial, simplemente retornamos el mismo objeto vista en el método render (claro, es un ejemplo) la parte más importante del ejemplo es ver la línea final, luego de llamar al método render accedemos al objeto el, este objeto es parte de la clase base y va a contener el HTML que vamos a imprimir en la vista, entonces, siempre vamos a retornar this en nuestro método render para poder acceder a el y poner en la página. Si corremos este código vemos lo siguiente:

image

Por defecto el contenido de la vista es un simple div, el mismo se encuentra contenido en la propiedad el

La propiedad el de la vista

Como vimos en esta propiedad se guarda el contenido de nuestra vista, existe otra propiedad (muy similar) que se llama $el, que es igual que el pero tiene un wrapper de jQuery (o Zepto, o la biblioteca que hayamos usado para manipular el DOM), vamos a interactuar con esta propiedad cuando queramos manipular el contenido de nuestra vista.

El tagName

La propiedad tagName de la vista nos permite cambiar el tipo de elemento que genera, por defecto es un div pero si configuramos la propiedad como un strong por ejemplo es lo que obtendremos.

var Vista = Backbone.View.extend({
	tagName: "strong", //cambiamos el elemento de la vista
	render: function(){
		return this;
	}
});
		
var vista = new Vista();

$("#container").append(vista.render().el);

image

Usando un template en la vista

Como dije al principio backbone no nos dice mucho de la vista así que muchas de las cosas que hacen son como convenciones, una de ellas es asignar a la vista una propiedad template y colocar dentro código HTML que vamos a renderizar y con esto reemplazar totalmente el contenido del elemento el, por ejemplo:

var Vista = Backbone.View.extend({
	template: "<strong>hola</strong>",
	render: function(){
		this.el = this.template;
		return this;
	}
});
		
var vista = new Vista();

$("#container").append(vista.render().el);

image

Agregando el modelo a la vista

Bien, ahora vamos a intentar mostrar el contenido del modelo en la vista, para hacer vamos a crear un modelo como hicimos antes y pasarlo a la vista para que ésta lo muestre, el código sería así:

//definimos un modelo sin nada en especial
var Modelo = Backbone.Model.extend({
});	
//definimos una vista, vamos a usar el div por defecto
//en "el" para agregarle datos del modelo
var Vista = Backbone.View.extend({
	render: function(){
		//utilizamos $el para agregar el dato del modelo
		this.$el.append(this.model.get("texto"));
		return this;
	}
});
//creamos una instancia del modelo y asignamos la propiedad texto		
var modelo = new Modelo({texto: "hola mundo"});
//instanciamos una vista y pasamos el modelo en el constructor
//utilizamos la propiedad model
var vista = new Vista({model: modelo});
//renderizamos la vista
$("#container").append(vista.render().el);

image

Eventos, escuchando y cambiando el modelo

Una cosa interesante de backbone es que la comunicación entre componentes la podemos hacer totalmente a través de eventos, vamos a ver cómo hacemos para que la vista sepa que el modelo cambió.

Existe un método en la vista el cual es ejecutado al crearse la misma, que sirve las veces de constructor, aquí es donde nos “atachamos” a los eventos del modelo para saber que cambió, del siguiente modo:

//definimos un modelo sin nada en especial
var Modelo = Backbone.Model.extend({
});	
//definimos una vista, vamos a usar el div por defecto
//en "el" para agregarle datos del modelo
var Vista = Backbone.View.extend({
	initialize: function(){ //este método se ejecuta el crear una instancia
		this.model.on("change", this.render, this); 
		//escuchamos el evento "change" de nuestro modelo
		//y indicamos que cuando ocurra se ejecute el método
		//"render" (el último parámetro es el contexto)
	},
	render: function(){
		//utilizamos $el para agregar el dato del modelo
		this.$el.html(this.model.get("texto"));
		return this;
	}
});
//creamos una instancia del modelo y asignamos la propiedad texto		
var modelo = new Modelo({texto: "hola mundo"});
//instanciamos una vista y pasamos el modelo en el constructor
//utilizamos la propiedad model
var vista = new Vista({model: modelo});
//renderizamos la vista
$("#container").append(vista.render().el);

Si ahora ejecutamos la aplicación y desde la consola hacemos:

model.set("texto", "chau")

La vista se vuelve a dibujar.

Acá tenemos una lista completa de los eventos a los que nos podemos “atachar” entre ellos está, por supuesto”, el evento “invalid”.

Cambiar el contenido del modelo cuando algo cambia en la vista

Backbone tiene una forma de escuchar los eventos dentro de una vista con un sintaxis similar a la de jQuery, el único detalle a tener en cuenta es que el contexto sobre el que se trabaja es siempre el elemento $el, veamos un ejemplo

//definimos un modelo sin nada en especial
var Modelo = Backbone.Model.extend({
});	
//definimos una vista, vamos a usar el div por defecto
//en "el" para agregarle datos del modelo
var Vista = Backbone.View.extend({
	initialize: function(){ //este método se ejecuta el crear una instancia
		this.model.on("change", this.render, this); 
		//escuchamos el evento "change" de nuestro modelo
		//y indicamos que cuando ocurra se ejecute el método
		//"render" (el último parámetro es el contexto)
	},
	render: function(){
		//utilizamos $el para agregar el dato del modelo
		this.$el.html(this.model.get("texto"));
		return this;
	},
	events:{
		"click": function(){ //escuchamos el evento click
							 //sobre todo $el
			this.model.set("texto", "click!!"); //modificamos el modelo
		}
	}
});
//creamos una instancia del modelo y asignamos la propiedad texto		
var modelo = new Modelo({texto: "hola mundo"});
//instanciamos una vista y pasamos el modelo en el constructor
//utilizamos la propiedad model
var vista = new Vista({model: modelo});
//renderizamos la vista
$("#container").append(vista.render().el);

En este caso escuchamos el evento “click” sobre todo $el (porque no definimos agregamos un selector después del nombre del evento click) y cuando ocurre el evento modificamos el modelo, después, ya que estamos escuchando los cambios del modelo, automáticamente se vuelve a dibujar con el nuevo valor de la propiedad texto, para resumir dejo un link a un ejemplo un poco más completo, con un template.

Nos leemos.

Loading