Question

我的模型视图设置如下：

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的{{1}}，我首先呈现AppView，然后将其PlayerView追加到$el＆＃39} $埃尔。我在这里期待一个错误情况，因为它会向主视图显示AppView 2次，如下所示：

首先，在PlayerView我将内容放入pView.render()和
其次，在我将pView pView附加到主视图的同一行。

但它只是将$el仅追加一次。这是如何运作的？

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

Answer 1

假设您在评论中提到的DOM中存在div.player，

执行pView.render()时，会在其中添加模板。

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

您的代码正常运行。

如果你打算创建多个玩家，你不应该在玩家视图中使用el选项，而应该装饰由骨干创建的元素并创建多个玩家视图实例。

Backbone View如何渲染工作？

1 个答案: