2013-05-18 14 views
5

Ich habe mit Backbone gespielt und versucht es zu lernen. Ich stecke an diesem Punkt für eine Weile fest. Kannst du mit dem folgenden Code nicht herausfinden, was falsch ist?Warum funktioniert diese Renderfunktion nicht?

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

Antwort

11

Sie haben Kontextproblem. this Sie beziehen sich auf enthält nicht die $el, die Sie suchen. Sie können dies beheben, indem Sie eine self Variable deklarieren, die auf this verweist. Der folgende Code sollte für Sie funktionieren.

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

Side Hinweis: Wie Sie Rückgrat lehnen auch Sie sollten mit dem Dokument Reflow sehr commong JavaScript Problem kennen. Sie rendern eine Ansicht für jedes einzelne Modell in der Sammlung. Dies kann zu Leistungsproblemen und insbesondere auf alten Computern und mobilen Geräten führen. Sie können Ihren Code optimieren, indem Sie alles in container rendern und ihn einmal anhängen, anstatt jedes Mal das DOM zu aktualisieren. Hier ein Beispiel:

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); 
} 
+0

Perfekt, funktioniert super! Vielen Dank, und ich werde auch auf das Problem des Dokumentenflusses eingehen. Sehr nützliche Informationen in der Tat! –

Verwandte Themen