这是一个很好的问题。Backbone很棒，因为它缺乏假设，但这确实意味着你必须（决定如何）自己实现这样的事情。在浏览了我自己的东西之后，我发现我（有点）混合使用了场景1和场景2。我不认为存在第4个神奇的场景，因为很简单，你在场景1和2中所做的一切都必须完成。
我认为用一个例子来解释我喜欢如何处理它是最简单的。假设我把这个简单的页面分解成指定的视图：
假设 HTML 在呈现后是这样的：
<div id="parent">
<div id="name">Person: Kevin Peel</div>
<div id="info">
First name: <span class="first_name">Kevin</span><br />
Last name: <span class="last_name">Peel</span><br />
</div>
<div>Phone Numbers:</div>
<div id="phone_numbers">
<div>#1: 123-456-7890</div>
<div>#2: 456-789-0123</div>
</div>
</div>
希望HTML如何与图表匹配是非常明显的。
包含 2 个子视图，以及一些额外的 div，其中一个 ，需要在某个时候设置。 保存自己的子视图，即条目数组。ParentViewInfoViewPhoneListView#namePhoneListViewPhoneView
所以继续你的实际问题。我根据视图类型以不同的方式处理初始化和呈现。我将我的观点分为两种类型，视图和视图。ParentChild
它们之间的区别很简单，视图包含子视图，而视图则不具有子视图。因此，在我的示例中，并且是视图，而和条目是视图。ParentChildParentViewPhoneListViewParentInfoViewPhoneViewChild
就像我之前提到的，这两个类别之间最大的区别在于何时允许它们渲染。在一个完美的世界里，我希望视图只渲染一次。当模型更改时，由其子视图处理任何重新渲染。 另一方面，我允许在需要时随时重新渲染，因为他们没有任何其他视图依赖于它们。ParentChild
更详细地说，对于视图，我喜欢我的函数做一些事情：Parentinitialize
- 初始化我自己的视图
- 渲染我自己的视图
- 创建并初始化任何子视图。
- 在我的视图中为每个子视图分配一个元素（例如，将分配 ）。
InfoView#info
步骤 1 非常不言自明。
步骤 2（呈现）的完成是为了让子视图所依赖的任何元素在我尝试分配它们之前已经存在。通过这样做，我知道所有的孩子都将被正确设置，我可以根据需要多次重新渲染他们的块，而不必担心必须重新委派任何内容。我实际上没有任何孩子在这里的观点，我允许他们在自己的范围内这样做。eventsrenderinitialization
步骤 3 和 4 实际上与我在创建子视图时传入的时间同时处理。我喜欢在这里传递一个元素，因为我觉得父母应该确定在自己的视图中允许孩子放置其内容的位置。el
对于渲染，我试图让它对视图保持非常简单。我希望该函数只做呈现父视图。没有事件委派，没有子视图的呈现，什么都没有。只是一个简单的渲染。Parentrender
有时这并不总是有效。例如，在我上面的示例中，每当模型中的名称更改时，都需要更新元素。但是，此块是模板的一部分，不是由专用视图处理的，因此我解决此问题。我将创建某种函数，该函数仅替换元素的内容，而不必丢弃整个元素。这可能看起来像是一个黑客，但我真的发现它比担心重新渲染整个DOM和重新附加元素等更好。如果我真的想让它变得干净，我会创建一个新的视图（类似于）来处理块。#nameParentViewChildsubRender#name#parentChildInfoView#name
现在对于视图，它与视图非常相似，只是没有创建任何进一步的视图。所以：ChildinitializationParentChild
- 初始化我的视图
- 安装程序绑定侦听我关心的模型的任何更改
- 渲染我的视图
Child视图渲染也很简单，只需渲染和设置我的内容。同样，不要搞砸授权或类似的事情。el
以下是我的一些示例代码：ParentView
var ParentView = Backbone.View.extend({
el: "#parent",
initialize: function() {
// Step 1, (init) I want to know anytime the name changes
this.model.bind("change:first_name", this.subRender, this);
this.model.bind("change:last_name", this.subRender, this);
// Step 2, render my own view
this.render();
// Step 3/4, create the children and assign elements
this.infoView = new InfoView({el: "#info", model: this.model});
this.phoneListView = new PhoneListView({el: "#phone_numbers", model: this.model});
},
render: function() {
// Render my template
this.$el.html(this.template());
// Render the name
this.subRender();
},
subRender: function() {
// Set our name block and only our name block
$("#name").html("Person: " + this.model.first_name + " " + this.model.last_name);
}
});
你可以在这里看到我的实现。通过将更改绑定到 而不是 ，我不必担心爆炸和重建整个块。subRendersubRenderrender
下面是该块的示例代码：InfoView
var InfoView = Backbone.View.extend({
initialize: function() {
// I want to re-render on changes
this.model.bind("change", this.render, this);
// Render
this.render();
},
render: function() {
// Just render my template
this.$el.html(this.template());
}
});
绑定是这里的重要部分。通过绑定到我的模型，我再也不用担心手动给自己打电话了。如果模型发生更改，此块将重新渲染自身，而不会影响任何其他视图。render
将类似于 ，您只需要在 和 函数中都多一点逻辑来处理集合。如何处理集合实际上取决于您，但您至少需要侦听集合事件并决定如何呈现（追加/删除，或者只是重新呈现整个块）。我个人喜欢附加新视图并删除旧视图，而不是重新渲染整个视图。PhoneListViewParentViewinitializationrender
将几乎与 相同，只听它所关心的模型变化。PhoneViewInfoView
希望这有所帮助，如果有任何令人困惑或不够详细，请告诉我。
