Para lograr estos objetivos contamos con el elemento “el” que hace referencia al nombre del elemento DOM con el que hemos identificado nuestra parte de la vista.
¿Que es “el”?
Este elemento es el componente o propiedad central de nuestra vista, ya que es la referencia al elemento DOM que es obligatorio que las vistas tengan. Las vistas utilizan “el” como la propiedad con la cual componemos el contenido y que luego procederá a ser insertado en el DOM.
Existen dos formas en las que podemos asociar un elemento DOM con la vista, la primera es creando uno nuevo y añadirlo al DOM y la segunda es haciendo una referencia a uno existente dentro de la página.
Veamos el siguiente código donde podremos apreciar lo que hemos aprendido hasta el momento:
var TareasView = Backbone.View.extend({ tagName: 'ul', // es requerido pero si lo dejamos vacío se toma como div className: 'contenedor', // es opcional pero podemos asignarle múltiples clases id: 'tarea', // optional }); var tareasView = new TareasView(); console.log( tareasView .el); // imprimirá <ul id="tarea" class="contenedor"></ul>
Como podemos ver, creamos una vista de forma básica extendiendo o heredando de Backbone.View, luego con las propiedades mencionadas les asignamos un valor, por último instanciamos y con un console.log() vemos el resultado.
En la siguiente imagen podemos ilustrar como luce esto en nuestra consola Chrome:
Aquí vemos como pudimos generar un elemento con la etiqueta <ul> que habíamos especificado en nuestra generación de la vista.
Método setElement
Este método se utiliza cuando queremos aplicar la vista a un elemento DOM diferente que ya existe, entonces creará una nueva referencia $el, la cual no estará unida al elemento original si no que apuntará al nuevo, todo esto dependiendo del evento que llamemos.
Veamos en el siguiente código como aplicamos esto:
// Creamos dos elementos DOM que representan botones var button1 = $('<button></button>'); var button2 = $('<button></button>'); //Definimos una nueva vista var View = Backbone.View.extend({ events: { click: function(e) { console.log(view.el === e.target); } } }); // Creamos una instancia de la vista y se la aplicamos al elemento button1 // to button1 var view = new View({el: button1}); // Ahora aplicamos la vista al elemento button2 con el método setElement view.setElement(button2); button1.trigger('click'); button2.trigger('click');
Esto debería devolvernos un valor true cuando ejecutamos el evento en el elemento button2 ya que la vista fue cambiada a él, veamos para finalizar el tutorial la imagen que hace referencia a lo antes explicado: