Wie funktioniert Backbone View-Rendering?

Question

Ich habe eine Ansicht wie folgt aufgebaut Modell:

var PlayerView = Backbone.View.extend({ 
    el: "div.player", 
    template: _.template($("#playerTemplate").html()), 

    render: function() { 
     this.$el.append(this.template(this.model.toJSON())); 
     return this; 
    } 
}); 

und die Hauptansicht wird wie folgt aufgebaut:

var AppView = Backbone.View.extend({ 
    el: "#players", 

    render: function() { 
     var pView = new PlayerView({model: playerModel}); 
     this.$el.append(pView.render().$el); 
    } 
}); 

Wenn Sie die render von AppView bemerken, ich die PlayerView erste bin Rendering und fügt dann $el an AppView 's $ el an. Ich habe erwartet, hier eine Fehlersituation, da es PlayerView 2 mal zur Hauptansicht angezeigt werden würde, wie folgt:

• Zuerst wird in den pView.render() wo ich zufrieden stellte in pView und
• Zweitens in der gleichen Zeile, wo ich Hängen Sie pViews $el an die Hauptansicht an.

Aber es fügt nur die pView nur einmal an. Wie funktioniert das?

Ich bin mir nicht sicher, dass ich meine Frage klar erklärt habe; Ich kann bei Bedarf mehr Kontext hinzufügen.

Answer 1

Unter der Annahme, div.player in DOM existiert, wie Sie in den Kommentaren erwähnt,

Wenn Sie pView.render() tun, fügt er die Vorlage in seinem Inneren.

Dann, wenn Sie pView ‚s Element (div.player) zu AppView des Elements (#players) anhängen, ganze div.player in #players bewegt.

Ihr Code funktioniert so, wie es funktionieren sollte.

Wenn Sie mehrere Player erstellen möchten, sollten Sie die Option el nicht in der Playeransicht verwenden. Stattdessen sollten Sie das vom Backbone erstellte Element dekorieren und mehrere Instanzen der Playeransicht erstellen.