使用主干切换视图

Question

我正在寻找使用backbone.js 切换视图的最佳模式

假设我有一个这样的基本 DOM 结构：

<div id="header">Some fixed content</div>
<div id="mainContainer"></div>
<div id="footer">Some other content</div>

我有两个视图“viewOne”和“viewTwo”，我想在 mainContainer 中交替显示。

路由器应该是这样的：

routes: {
    'one': 'pageOne',
    'two': 'pageTwo'
},      
pageOne: function() {
    viewOne.render();
},
pageTwo: function(){
    viewTwo.render();
}

我应该在哪里将 view.el 添加或删除到 DOM？ 在视图之间切换的最佳模式是什么？

Answer 1

我将使用负责呈现其子视图的更高级别的视图（附加到#mainContainer）。根据您的描述，您的视图差异太大，无法考虑根据某些条件使用单个视图渲染它们，而且我认为拥有视图的层次结构树总是更干净，因此渲染整个页面基本上是对顶部的调用-级别视图的 .render() （委托给子级）。

您的主容器级视图可以公开两个函数，比如 renderPageOne 和 renderPageTwo，这就是路由器必须知道的全部内容。在这些函数中，您可以跟踪要渲染的子视图，并调用 this.render() 来清除当前内容（在主容器 el 上使用 jQuery 的 .empty()），并插入正确的子视图的顶部元素（ .el)。