Perché questa funzione di rendering non funziona?

Question

Ho giocato con la spina dorsale e ho cercato di impararlo. Sono bloccato a questo punto per un po '. Non sei in grado di capire cosa c'è che non va nel codice seguente?

render: function() { 
    this.$el.empty(); 
    // render each subview, appending to our root element 
    _.each(this._views, function(sub_view) { 
     this.$el.append(sub_view.render().el); // Error on this line 
    }); 

Answer 1

Hai problemi di contesto. this a cui stai facendo riferimento non contiene lo $el che stai cercando. È possibile risolvere questo problema dichiarando una variabile self che punta all'appropriata this. Il seguente codice dovrebbe funzionare per te.

render: function() { 
    var self = this; //Added this line to declare variable (self) that point to 'this' 
    this.$el.empty(); 
    _.each(this._views, function(sub_view) { 
     self.$el.append(sub_view.render().el); //Used 'self' here instead 'this' 
}); 

Nota a margine: Come si sta appoggiando spina dorsale anche che dovete sapere su un problema molto commong JavaScript con il documento di riflusso. Si esegue il rendering di una vista per ogni singolo modello nella raccolta. Può portare a problemi di prestazioni e in particolare su vecchi computer e dispositivi mobili. Puoi ottimizzare il tuo codice eseguendo il rendering di tutto in container e aggiungendolo una volta, invece di aggiornare DOM ogni volta. Ecco un esempio:

render: function() { 
    this.$el.empty(); 
    var container = document.createDocumentFragment(); 
    _.each(this._views, function(sub_view) { 
    container.appendChild(sub_view.render().el) 
    }); 
    this.$el.append(container); 
}