用骨干切换视图

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()(委托给孩子).

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