Backbone (View)

View

Las vista son las encargadas de representar la datos de nuestro modelo al usuario y también se encargan de capturar eventos y reaccionar de forma adecuada.

UsuarioView = Backbone.View.extend({
   tagName : "li",
   className : "item",
   events : {
    "click .delete" : "deleteUsuario"
   },
   initialize : function () {
    console.log('creado una view de usuario');
    this.template = _.template( $('#usuario-template').html());
   },
   deleteUsuario : function(e){
    this.$el.unbind();
    this.$el.remove();
   },
   render : function () {
    var data = this.model.toJSON();
    var html = this.template(data);
    this.$el.html(html);
   }
});

var usarioView = new UsuarioView({model : usuario});

Vamos a explicar un poco esta clase para compreder su funcionamiento.

La propiedad el

Cada instancia de una vista contendrá una propiedad llamada el, que será el objeto DOM que tendrá todo el contenido de la vista. Este elemento se crea automáticamente como un elemento div vacío, salvo que se indique lo contrario con las propiedades tagName y className, en nuestro caso va ser un elemto li con la clase item.
Por comodidad yo uso la propiedad $el que es el objecto DOM pero convertido en un objecto de jquery.

El método render

Este método se debe sobre escribir siempre porque es un método vacío, este método es el encargado de renderizar la plantilla de la vista con los datos del modelo y actulizar la propiedad $el

Eventos

Toda vista puede definir eventos y sus escuchadores, para ello se define un objeto hash llamado events con el siguiente formato en cada propiedad: {“event selector”: “callback”}. De esta forma indicaremos que para cada evento que ocurra bajo los elementos indicados por el selector se ejecutará la función callback.

Con esto tenemos la base para crear vistas de backbone, os envito a ver todos los métodos que tiene la clase View de Backbone.