Perché gli eventi non vengono attivati ​​dopo il secondo rendering in Backbone.js?

Question

Sto creando un'app in Backbone.js che ha una vista padre e più figli. Le viste secondarie contengono collegamenti che ascoltano ed eseguono una funzione.

Il genitore memorizza un elenco di tutte le viste figli. Nella funzione di rendering, dopo che è fatto calcolando il proprio html, lo fa il seguente:

$(this.el).html(html); 
for (var i = 0; i < this.views.length; i++){ 
    $('.children', this.el).append(this.views[i].render().el); 
} 

RISPOSTA: Il problema era che stavo creando il collegamento durante il rendering. Cioè sul primo rendering (che è stato chiamato da init) l'evento è stato correttamente associato al collegamento. Tuttavia, poiché tutte le seguenti chiamate di rendering ricreano l'intero elemento, il nuovo collegamento non ha il gestore associato ad esso. Questo è stato risolto attraverso una soluzione @ Tom Tu di aggiungere this.delegateEvents() al render

Answer 1

Probabilmente si sta utilizzando la funzione jquery remove da qualche parte per rimuovere le subviews dalla vista - rimuove automaticamente tutti gli eventi legati all'elemento (this.el) - impostato nell'oggetto events. È possibile utilizzare il metodo this.delegateEvents() nel rendering delle sottoview dopo aver eseguito il rendering del modello per riassociare i delegati dell'evento impostati nell'oggetto events o utilizzare il metodo jquery detach per rimuovere elementi dal DOM senza rimuovere i binding di eventi (link). Il metodo delegateEvents è piuttosto costoso e quindi raccomanderei il metodo detach per rimuovere elementi che si desidera riutilizzare se si esegue il rendering di lunghi elenchi di sottoview - irrilevante se si tratta solo di un paio di visualizzazioni.

Un'altra possibilità è che hai impostato l'oggetto events errato - difficile da dire dalla quantità di codice fornito, ma scommetto sul primo.

Answer 2

Una sfida molto comune. Per i futuri cercatori di questa domanda, ecco un grande articolo sulla visualizzazione di rendering:

Hai solo bisogno di fare in modo che delegateEvents è chiamato a ricollegare gli eventi sul tuo subviews qualsiasi momento .html() viene eseguito. E dal momento che setElement di Backbone chiama già delegateEvents, una soluzione rapida potrebbe essere la seguente ...

http://ianstormtaylor.com/rendering-views-in-backbonejs-isnt-always-simple/