需要帮助理解主干中嵌套视图的基础知识
Posted
技术标签:
【中文标题】需要帮助理解主干中嵌套视图的基础知识【英文标题】：Need help understanding the basics of nested views in backbone 【发布时间】：2013-02-23 01:43:19 【问题描述】：我一直在阅读有关backbone.js 中嵌套视图的大量信息，并且我了解其中的大部分内容，但仍然让我感到困惑的一件事是......
如果我的应用程序有一个 shell 视图，其中包含在使用应用程序的过程中不会更改的子视图（如页面导航、页脚等），我是否需要为每个路由呈现 shell 还是我对视图进行某种检查以查看它是否已经存在？
如果有人在应用程序中前进之前没有击中“家”路线，我会觉得是这样。
我在谷歌上没有发现任何有用的信息，所以任何建议都非常感谢。
谢谢！
【问题讨论】：
Charles，在你花太多时间重新发明***之前，先看看backbone.marionette。它可能会也可能不会满足您的需求，但我希望我在开始我的嵌套视图项目时就知道它:) 【参考方案1】：由于您的“外壳”或“布局”视图永远不会改变，您应该在应用程序启动时渲染它（在触发任何路由之前），并将进一步的视图渲染到布局视图中。
假设您的布局如下所示：
<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。如果您需要更改视图的呈现方式，这也可能会派上用场。
【讨论】：
有时最明显的解决方案是最难看到的！感谢您对此有所启发。非常好。 fincliff 在您的示例中，是否需要此行末尾的 .el ？this.$("#container").html((this.child = view).render().el); 抛出错误“无法读取未定义的属性'el'”
@Charles，为了使其工作，您需要从视图的 render 方法中使用 return this - 这是一种非常常见的模式。如果您不想这样做，只需将render() 调用和.html(view.el) 分开在不同的行上。
我也喜欢这个解决方案。这就是我想要的。更简洁的代码。以上是关于需要帮助理解主干中嵌套视图的基础知识的主要内容，如果未能解决你的问题，请参考以下文章