问如何在Backbone.js中呈现和附加子视图

EN

我通常看到/使用了几种不同的解决方案：

解决方案1

var OuterView = Backbone.View.extend({
    initialize: function() {
        this.inner = new InnerView();
    },

    render: function() {
        this.$el.html(template); // or this.$el.empty() if you have no template
        this.$el.append(this.inner.$el);
        this.inner.render();
    }
});

var InnerView = Backbone.View.extend({
    render: function() {
        this.$el.html(template);
        this.delegateEvents();
    }
});

这与您的第一个示例类似，但有一些更改：

1. 附加子元素的顺序很重要
2. 外部视图不包含要在内部视图上设置的tagName元素(这意味着您仍然可以在内部视图的元素被放入DOM之后调用内部view)
3. render()中的tagName，如果内部视图的render()方法根据其他元素的位置/大小在页面上放置自身/调整自身大小)

会很有帮助

解决方案2

var OuterView = Backbone.View.extend({
    initialize: function() {
        this.render();
    },

    render: function() {
        this.$el.html(template); // or this.$el.empty() if you have no template
        this.inner = new InnerView();
        this.$el.append(this.inner.$el);
    }
});

var InnerView = Backbone.View.extend({
    initialize: function() {
        this.render();
    },

    render: function() {
        this.$el.html(template);
    }
});

解决方案2可能看起来更干净，但它在我的经验中造成了一些奇怪的事情，并对性能产生了负面影响。

我通常使用解决方案1，原因有几个：

1. 我的很多视图依赖于已经在DOM中的render()方法
2. 当外部视图重新呈现时，视图不需要重新初始化，重新初始化会导致内存泄漏，还会导致现有绑定的异常问题

请记住，如果每次调用render()时都要初始化new View()，则该初始化无论如何都会调用delegateEvents()。因此，正如您所表达的，这不一定是一个“骗局”。

这是一个长期存在的问题，在我的经验中，这个问题并没有一个令人满意的答案。我和你一样沮丧，特别是因为尽管这种用例很常见，但指导太少了。也就是说，我通常会使用类似于你的第二个例子的东西。

首先，我会立即排除任何需要您重新委托事件的事情。Backbone的事件驱动视图模型是它最关键的组件之一，仅仅因为你的应用程序很重要就失去了这个功能，这会给任何程序员留下不好的印象。所以从第一点开始。

关于你的第三个例子，我认为它只是绕过了传统的渲染实践，并没有增加太多的意义。也许，如果您正在进行实际的事件触发(即，不是人为的"onRender“事件)，那么将这些事件绑定到render本身可能是值得的。如果您发现render变得笨拙和复杂，那么您的子视图太少了。

回到你的第二个例子，这可能是三害中较小的一个。下面是摘自的示例代码，可以在我的PDF版本的第42页找到：

...
render: function() {
    $(this.el).html(this.template());
    this.addAll();
    return this;
},
  addAll: function() {
    this.collection.each(this.addOne);
},
  addOne: function(model) {
    view = new Views.Appointment({model: model});
    view.render();
    $(this.el).append(view.el);
    model.bind('remove', view.remove);
}

这只是一个比您的第二个示例稍微复杂一点的设置:它们指定了一组函数addAll和addOne，用于完成繁琐的工作。我认为这种方法是可行的(我当然会使用它)；但它仍然留下了奇怪的回味。(请原谅所有这些舌头比喻。)

关于以正确的顺序添加的观点:如果您严格地添加，当然，这是一个限制。但一定要考虑所有可能的模板方案。也许您实际上想要一个占位符元素(例如，一个空的div或ul)，然后您可以replaceWith一个包含相应子视图的新(DOM)元素。追加并不是唯一的解决方案，如果你那么关心它，你当然可以绕过排序问题，但如果它让你绊倒，我可以想象你有一个设计问题。请记住，子视图可以有子视图，如果合适的话，它们应该有子视图。这样，您就有了一个相当不错的树状结构:每个子视图按顺序添加其所有子视图，然后父视图添加另一个子视图，依此类推。

不幸的是，解决方案#2可能是您希望使用开箱即用主干的最好方案。如果你对第三方库感兴趣，我已经研究过的(但实际上还没有时间)是Backbone.LayoutManager，它似乎有一种更健康的添加子视图的方法。然而，即使是他们在类似的问题上也有recent debates。

令人惊讶的是，这还没有被提及，但我会认真考虑使用Marionette。

它为主干应用程序增加了更多的结构，包括特定的视图类型(ListView、ItemView、Region和Layout)，添加了适当的Controller等等。

这里有the project on Github和一个很棒的guide by Addy Osmani in the book Backbone Fundamentals，可以帮助你入门。