Backbone refresh ver eventos

Question

En mi opinión, no declaro this.el porque lo creo dinámicamente, pero de esta forma los eventos no se disparan.

Este es el código:

Vista 1:

App.Views_1 = Backbone.View.extend({ 

    el:    '#content', 

    initialize:  function() {  
         _.bindAll(this, 'render', 'renderSingle');       
        }, 

    render:   function() {  
         this.model.each(this.renderSingle);     
        }, 

    renderSingle: function(model) { 

         this.tmpView = new App.Views_2({model: model});      
         $(this.el).append(this.tmpView.render().el); 

        } 
}); 

Vista 2:

App.Views_2 = Backbone.View.extend({ 

    initialize:  function() {         
         _.bindAll(this, 'render');      
        }, 

    render:   function() {  
         this.el = $('#template').tmpl(this.model.attributes);  // jQuery template       
         return this;        
        }, 

    events:   {  
         'click .button' :  'test'     
        }, 

    test:   function() {   
         alert('Fire'); 
        } 

    }); 

}); 

Cuando hago clic en ".button" no pasa nada. Gracias;

Answer 1

Al final de su método render(), puede indicarle a la red troncal que vuelva a enlazar eventos usando delegateEvents(). Si no pasa ningún argumento, usará su hash de eventos.

render:   function() {  
        this.el = $('#template').tmpl(this.model.attributes);  // jQuery template       
        this.delegateEvents(); 
        return this;        
       } 

Answer 2

Como de Backbone.js v0.9.0 (30 de enero, 2012), no es el método setElement para conmutar un elemento de vistas y gestiona la delegación evento.

render: function() { 
    this.setElement($('#template').tmpl(this.model.attributes)); 
    return this; 
} 

Backbone.View setElement: http://backbonejs.org/#View-setElement

setElementview.setElement (elemento)

Si desea solicitar una vista espinazo a un elemento DOM diferente, utilice setElement, que se también cree la referencia $ el en caché y mueva los eventos delegados de la vista desde el elemento anterior al nuevo.

crear dinámicamente sus puntos de vista de esta manera lo tiene es ventajas y desventajas, sin embargo:

Pros:

• Todo el formato HTML de la aplicación se generarían en plantillas, porque los elementos raíz de Vistas se reemplazan por el marcado devuelto por el procesamiento. Esto es realmente agradable ... no más buscando HTML dentro de JS.
• Buena separación de preocupaciones. Las plantillas generan el 100% del marcado HTML. Las vistas solo muestran los estados de ese marcado y responden a varios eventos.
• Hacer que render sea responsable de la creación de toda la vista (incluido su elemento raíz) está en línea con la forma en que ReactJS representa los componentes, por lo que podría ser un paso beneficioso en el proceso de migración de Backbone.Views a los componentes de ReactJS .

Contras:-En su mayoría son insignificantes

• Esto no habría una transición sin dolor para hacer sobre una base de código existente. Las vistas deberían actualizarse y todas las plantillas deberían tener los elementos raíz de la vista incluidos en el marcado.
  • plantillas utilizadas por múltiples puntos de vista podría ser un poco peluda - ¿Le elemento raíz ser idéntico en todos los casos de uso?
• Antes de invocar el renderizado, el elemento raíz de la vista es inútil. Cualquier modificación será descartada.
  • Esto incluiría vistas padre que configuran clases/datos en elementos de vista secundarios antes del procesamiento. También es una mala práctica de hacer esto, pero sucede - esas modificaciones se perderán al hacer que anula el elemento.
• menos que anule el constructor Backbone.View, todas las vistas innecesariamente delegar es eventos y establecer los atributos de un elemento raíz que es sustituido durante la representación.
• Si una de sus plantillas remite a una lista de elementos en lugar de un solo elemento principal que contiene los niños, you're going have a bad time. setElement tomará el primer elemento de esa lista y tirará el resto.
  • He aquí un ejemplo de ese problema, sin embargo: http://jsfiddle.net/CoryDanielson/Lj3r85ew/
  • Este problema podría mitigarse mediante una tarea de compilación que analiza las plantillas y asegura que se resuelven en un solo elemento, o por razones imperiosas setElement y asegurar que el entrante element.length === 1.