Delegación de eventos a los sub-vistas en Backbone.js

Question

Todos sabemos hacer algo como esto es malo:

<ul> 
    <li>Item</li> 
    <li>Item</li> 
    ... 500 more list items 
</ul> 

y luego ...

$("ul li").bind("click", function() { ... }); 

que he estado buscando por mucho de ejemplos/guías de Backbone y el siguiente parece ser un enfoque estándar para representar una lista con elementos, basados ​​en una colección de modelos.

var ListView = Backbone.View.extend() { 

    tagName: 'ul', 

    render: function() { 
    this.collection.each(function(item) { 
     var view = new ListItemView({model: item}); 
     $(this.el).append(view.render().el); 
    }); 
    return this; 
    } 
}); 

Una vista de lista de elementos:

var ListItemView = Backbone.View.extend() { 

    tagName: 'li', 

    events: { 
    'click' : 'log' 
    } 

    log : function() { 
    console.log(this.model.get("title")); 
    } 

    render: function() { 
    $(this.el).html(this.template(this.model.toJSON())); 
    return this; 
    } 
}); 

Si no me equivoco, una instancia de la vista de lista con una colección de 500 modelos, me da 500 eventos de clic, uno para cada fila. Esto está mal ¿no?

Sé Backbone ha construido en delegación de eventos para eventos de espacios de nombres:

events : { 
    'click li' : 'log' 
} 

supongo que podría poner esto en mi ListView, y sólo crearía un evento de clic de toda la lista, pero luego me wouldn no se puede acceder a los datos del modelo correspondiente al elemento de la lista cliqueada.

¿Qué patrones usan los desarrolladores de backbone para resolver este problema típico?

Answer 1

Derick Bailey escribió una publicación detallada sobre este dilema, se puede comprobar que funciona aquí: http://lostechies.com/derickbailey/2011/10/11/backbone-js-getting-the-model-for-a-clicked-element/

Answer 2

Puede asociar la instancia con un elemento de este modo:

events : { 
    'click li' : 'log' 
}, 

log: function(e) { 
var elm = e.currentTarget //Same as `this` in normally bound jQuery event 


jQuery.data(elm, "viewInstance").log(e); 
}, 

continuación:

var ListItemView = Backbone.View.extend() { 

    tagName: 'li', 

    log : function() { 
    console.log(this.model.get("title"); 
    } 

    render: function() { 
     //Associate the element with the instance 
    $(this.el).html(this.template(this.model.toJSON())).data("viewInstance", this); 
    return this; 
    } 
}); 

Answer 3

Mantenga un registro de las subvistas desde la vista principal. Luego, al agregar la subvista, agréguelo al hash y agregue el cid al el de la subvista. De esta manera tiene un puntero a la subvista y podría realizar operaciones en su modelo, etc.

No he probado este código exacto a continuación, por lo que ESTO puede estar mal en un lugar o dos, pero he probado este principio general. También he omitido el código listitemview.

var ListView = Backbone.View.extend() { 
    subViews: {}, 
    tagName: 'ul', 
    events: { 
    'click li' : 'clickItem' 
    }, 
    clickItem: function(event){ 
    var id = event.currentTarget.cid; 
    var subView = this.subViews[id]; 


    }, 
    render: function() { 

    this.collection.each(function(item) { 
     var view = new ListItemView({model: item}); 
     this.subViews[view.cid] = view; 
     subEl = view.render().el; 
     subEl.cid = view.cid; 
     $(this.el).append(subEl); 
    }); 
    return this; 
    } 
});