javascript - Backbone View渲染如何工作？

我的模型视图设置如下：

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

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

并且主视图设置如下：

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

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

如果您注意到render的AppView，则首先渲染PlayerView，然后将其$el附加到AppView的$ el。我在这里期待一个错误情况，因为它将在主视图中显示PlayerView 2次，如下所示：


首先，在pView.render()中，将内容放在pView中，然后
其次，在同一行中，我将pView的$el附加到主视图。


但是它仅将pView附加一次。这是如何运作的？

我不确定我已经清楚地解释了我的问题；如果需要，我可以添加更多上下文。

最佳答案

假设您在注释中提到div.player在DOM中存在，

当您执行pView.render()时，它将在其中添加模板。

然后，当您将pView的元素（div.player）附加到AppView的元素（#players）时，整个div.player都将移入#players。

您的代码以应有的方式工作。

如果要创建多个播放器，则不应在播放器视图中使用el选项，而应装饰主干创建的元素并创建多个播放器视图实例。