Backbone refresh view eventi

Question

Dal mio punto di vista non lo dichiaro.el perché lo creo dinamicamente, ma in questo modo gli eventi non sparano.

Questo è il codice:

View 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); 

        } 
}); 

View 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'); 
        } 

    }); 

}); 

Quando clicco su "apri un" non succede nulla. Grazie;

Answer 1

Alla fine del metodo render(), è possibile indicare il backbone per riassociare gli eventi utilizzando delegateEvents(). Se non passi argomenti, userà il tuo hash degli eventi.

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

Answer 2

Al Backbone.js v0.9.0 (gennaio 30, 2012), v'è il metodo di commutazione setElement un elemento di vista e gestisce la delegazione evento.

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

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

setElementview.setElement (elemento)

Se vuoi applicare una vista Backbone ad un elemento DOM diverso, utilizzare setElement, che sarà creare anche il riferimento $ el memorizzato nella cache e spostare gli eventi delegati della vista dal vecchio elemento a quello nuovo.

dinamicamente creare le vostre opinioni in questo modo ha i suoi pro e contro, però:

Pro:

• Tutti i markup HTML dell'applicazione sarebbe generato nei modelli, poiché gli elementi radice di Views sono tutti sostituiti dal markup restituito dal rendering. Questo è in realtà un po 'carino ... non più cercando HTML all'interno di JS.
• Bella separazione di preoccupazioni. I modelli generano il 100% del markup HTML. Le viste visualizzano solo gli stati di quel markup e rispondono a vari eventi.
• Avere render responsabile della creazione dell'intera vista (incluso il suo elemento root) è in linea con il modo in cui ReactJS esegue il rendering dei componenti, quindi questo potrebbe essere un utile passaggio nel processo di migrazione da componenti Backbone.Views a ReactJS .

Contro:-questi sono per lo più trascurabili

• questo non sarebbe una transizione indolore per fare su una base di codice esistente. Le visualizzazioni dovrebbero essere aggiornate e tutti i modelli dovrebbero avere gli elementi radice della vista inclusi nel markup.
  • I modelli utilizzati da più viste potrebbero diventare un po 'pelosi - L'elemento radice sarebbe identico in tutti i casi d'uso?
• Prima di eseguire il rendering, l'elemento radice della vista è inutile. Qualsiasi modifica ad essa sarà gettato via.
  • Ciò includerebbe le visualizzazioni padre che impostano le classi/dati sugli elementi di visualizzazione figlio prima del rendering. È anche una cattiva pratica fare questo, ma succede - quelle modifiche andranno perse una volta che il rendering ha la precedenza sull'elemento.
• A meno che non si esegua l'override del costruttore Backbone.View, ogni vista delega gli eventi e imposta gli attributi su un elemento radice che viene sostituito durante il rendering.
• Se uno dei modelli si risolve in un elenco di elementi anziché in un elemento genitore singolo contenente figli, you're going have a bad time. setElement prenderà il primo elemento da quella lista e butterà via il resto.
  • Ecco un esempio di tale problema, però: http://jsfiddle.net/CoryDanielson/Lj3r85ew/
  • Questo problema potrebbe essere mitigata mediante un'operazione di generazione che analizza i modelli e assicura che risolvono ad un singolo elemento, o sovrascrivendo setElement e garantire che l'entrante element.length === 1.