Backbone.js está basado en la estructura MVC, además de poseer modelos, también posee vistas, según la filosofía de esta arquitectura de construcción de software las vistas son las que tienen la responsabilidad de mostrar al usuario los datos que se generan entre el controlador y el modelo dependiendo de la petición que se ha hecho.
En Backbone.js esto funciona un poco diferente, la vista no contiene como tal elementos que el usuario ve directamente, si no que comunica los datos a través de un motor de plantillas.
Las Vistas en Backbone.js
En Backbone.js las vistas como tal no contienen lenguaje HTML que pueda ser mostrado al usuario de nuestra aplicación, al contrario contienen la lógica que nos permitirá construir el funcionamiento de la parte frontal de la aplicación que estemos desarrollando utilizando el modelo como base, es decir, lo que tengamos en el modelo lo vamos a manipular en la vista teniendo así dos niveles de acción.
Para mostrar datos recurriremos al método render() que nos permite pasar los datos desde nuestra vista a una plantilla, dicha plantilla está construida en algún motor de plantillas Javascript como por ejemplo: Underscore, Mustache, Jquery-tpml, etc.
Creación de la Vista
Para crear una vista seguimos un proceso bastante directo y similar a la creación de un modelo, para generar la vista solo debemos extender de Backbone.View, veamos cómo se comporta esto al ejecutarlo en nuestra consola de Chrome utilizando un archivo HTML con las librerías de Backbone.js, jsquery y underscore ya cargadas.
Primero veamos el código que colocaremos en nuestra consola:
Como podemos ver, luego que hacemos el extend correspondiente vamos inicializando una cantidad de atributos que harán que nuestra vista funcione, adicionalmente en cada elemento colocamos los comentarios para que sepamos cómo funciona.
Ahora veamos en consola que sucede cuando llamamos a la vista:
Con esto finalizamos este tutorial con lo cual ya hemos dado un paso adelante en lo que corresponde la generación de vistas en una aplicación MVC utilizando Backbone.js.
En Backbone.js esto funciona un poco diferente, la vista no contiene como tal elementos que el usuario ve directamente, si no que comunica los datos a través de un motor de plantillas.
Las Vistas en Backbone.js
En Backbone.js las vistas como tal no contienen lenguaje HTML que pueda ser mostrado al usuario de nuestra aplicación, al contrario contienen la lógica que nos permitirá construir el funcionamiento de la parte frontal de la aplicación que estemos desarrollando utilizando el modelo como base, es decir, lo que tengamos en el modelo lo vamos a manipular en la vista teniendo así dos niveles de acción.
Para mostrar datos recurriremos al método render() que nos permite pasar los datos desde nuestra vista a una plantilla, dicha plantilla está construida en algún motor de plantillas Javascript como por ejemplo: Underscore, Mustache, Jquery-tpml, etc.
Creación de la Vista
Para crear una vista seguimos un proceso bastante directo y similar a la creación de un modelo, para generar la vista solo debemos extender de Backbone.View, veamos cómo se comporta esto al ejecutarlo en nuestra consola de Chrome utilizando un archivo HTML con las librerías de Backbone.js, jsquery y underscore ya cargadas.
Primero veamos el código que colocaremos en nuestra consola:
var TodoView = Backbone.View.extend({
tagName: 'li',
// Carga en cache la función de la plantilla para un único item.
todoTpl: _.template( "Una Plantilla de ejemplo" ),
events: {
'dblclick label': 'edit',
'keypress .edit': 'updateOnEnter',
'blur .edit': 'close'
},
//Vuelve a generar los titulos de la etiqueta del elemento.
render: function() {
this.$el.html( this.todoTpl( this.model.toJSON() ) );
this.input = this.$('.edit');
return this;
},
edit: function() {
// Es ejecutado cuando se hace doble click en la etiqueta
},
close: function() {
// se ejecuta cuando se quita el foco del elemento
},
updateOnEnter: function( e ) {
// se ejecuta cuando se presiona una tecla al estar en modo edición,
// sin embargo espera a que se presione enter para entrar en acción
}
});
Como podemos ver, luego que hacemos el extend correspondiente vamos inicializando una cantidad de atributos que harán que nuestra vista funcione, adicionalmente en cada elemento colocamos los comentarios para que sepamos cómo funciona.
Ahora veamos en consola que sucede cuando llamamos a la vista:
Importante
Al llamar al elemento el en el console.log() que le hicimos al objeto que instanciamos de nuestra vista, lo que hacemos es imprimir el elemento DOM correspondiente, de esta forma es que nuestras vistas pueden componer sus elementos y con ello ser insertados de una vez en el árbol DOM del documento plantilla.
Con esto finalizamos este tutorial con lo cual ya hemos dado un paso adelante en lo que corresponde la generación de vistas en una aplicación MVC utilizando Backbone.js.
