Backbone.js：在视图之间导航 - 破坏和重新创建

Question

我正在使用一些具有几个不同视图的Backbone.js Web应用程序。假设我们在页面顶部有AudioPlayer视图，该视图应该是持久性的，并且在页面内容的其余部分发生变化时播放音频。页面内容的其余部分应该能够按需切换（路由器通过导航更新URL）。

我正在寻找正确的方法来隐藏/删除FirstView，插入SecondView，然后隐藏/删除SecondView并在用户点击“返回”按钮时再次插入/显示FirstView。

我被告知，如果不显示视图以避免内存泄漏，则应删除视图。如果这是真的，那么重新创建视图的正确方法是什么，因为它的关联view.el在删除过程中已被销毁？或者有更合理的方法来做到这一点吗？

Answer 1

这就是我这样做的方式：

1. 使用名为open的方法扩展Backbone.View，该方法将视图附加到DOM，并在现在打开的视图上设置标记，以及类似的close属性
2. 在应用的常见views媒体资源上制作所有观看视图属性
3. 在应用上创建一个名为clearViews的方法，该方法将关闭除传入的视图名称之外的所有打开的视图

这是我一直在使用的一个要点（在coffeescript中）。随意复制。

https://gist.github.com/4597528

因此，在以这种方式扩展Backbone之后，假设您想要在关闭除app.views.topNav指向的顶部导航栏之外的所有打开视图之后在Backbone路线中创建并打开新视图。你可以说：

app.clearViews('topNav');
app.views.myNewView = new MyView;
app.render().open('body'); // or some other container

有一些很棒的观点和布局经理可以参加像Derick Baily的Marionette和Tim Branyen的LayoutManager这样的大型项目，但是对于我的小项目来说，它们似乎有点过分了。

Answer 2

我目前在我的几个应用程序中执行此操作，并使用选项卡式界面完成此操作。您可以在此处查看这些界面的示例：

• Twitter Bootstrap
• Zurb Foundation
• jQueryUI

我使用骨干路由器来观看网址。这让我为用户保持深层链接/书签，但我通常会对视图事件触发标签进行更改。

为了我的目的，我有一个多标签的应用程序，它有一个聊天窗口，图像库窗口和协作编辑窗口。