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:
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.