我一直在阅读有关backbone.js 中嵌套视图的大量信息，并且我了解其中的大部分内容，但仍然让我感到困惑的一件事是......
如果我的应用程序有一个 shell 视图，其中包含在使用应用程序的过程中不会更改的子视图（如页面导航、页脚等），我是否需要为每个路由呈现 shell 还是我对视图进行某种检查以查看它是否已经存在？
如果有人在应用程序中前进之前没有击中“家”路线，我会觉得是这样。
我在谷歌上没有发现任何有用的信息，所以任何建议都非常感谢。
谢谢！
【问题讨论】：
标签： backbone.js backbone-views backbone-routing
由于您的“外壳”或“布局”视图永远不会改变，您应该在应用程序启动时渲染它（在触发任何路由之前），并将进一步的视图渲染到布局视图中。
假设您的布局如下所示：
<body>
<section id="layout">
<section id="header"></section>
<section id="container"></section>
<section id="footer"></section>
</section>
</body>
您的布局视图可能如下所示：
var LayoutView = Backbone.View.extend({
el:"#layout",
render: function() {
this.$("#header").html((this.header = new HeaderView()).render().el);
this.$("#footer").html((this.footer = new FooterView()).render().el);
return this;
},
renderChild: function(view) {
if(this.child)
this.child.remove();
this.$("#container").html((this.child = view).render().el);
}
});
然后您将在应用程序启动时设置布局：
var layout = new LayoutView().render();
var router = new AppRouter({layout:layout});
Backbone.history.start();
在你的路由器代码中：
var AppRouter = Backbone.Router.extend({
initialize: function(options) {
this.layout = options.layout;
},
home: function() {
this.layout.renderChild(new HomeView());
},
other: function() {
this.layout.renderChild(new OtherView());
}
});
有很多方法可以给这只特殊的猫剥皮，但这是我通常处理它的方式。这为您提供了一个单一的控制点 (renderChild) 来呈现您的“*”视图，并确保在呈现新元素之前之前的元素是 removed。如果您需要更改视图的呈现方式，这也可能会派上用场。
【讨论】：
this.$("#container").html((this.child = view).render().el); 抛出错误“无法读取未定义的属性'el'”
render 方法中使用 return this - 这是一种非常常见的模式。如果您不想这样做，只需将render() 调用和.html(view.el) 分开在不同的行上。