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

Posted 2023-02-26

【中文标题】Backbone.js：在视图之间导航 - 销毁和重新创建

【英文标题】：Backbone.js: navigating between views - destroying and recreating

【发布时间】：2013-01-22 19:15:32

【问题描述】：

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

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

有人告诉我，当视图未显示时应将其删除以避免内存泄漏。如果这是真的，那么重新创建视图的正确方法是什么，因为其关联的 view.el 在删除过程中已被破坏？还是有更合乎逻辑的方法来做到这一点？

【问题讨论】：

如果您要重复使用相同的视图，您可能只想detach 它而不是删除它。

【参考方案1】：

这就是我的做法：

使用名为 open 的方法扩展 Backbone.View，该方法会将视图附加到 DOM 并在现在打开的视图上设置标志，以及类似的 close 属性 将所有视图属性设置在应用的公共 views 属性上 在应用程序上创建一个名为 clearViews 的方法，该方法将关闭所有打开的视图，但传入的视图名称除外

这是我一直在使用的要点（在咖啡脚本中）。随意复制。

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 这样的大型项目，有一些很棒的视图和布局管理器，但对于我的小型项目来说，它们似乎有点矫枉过正。

【讨论】：

javascript version is here

【参考方案2】：

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

Twitter Bootstrap Zurb Foundation jQueryUI

我使用主干路由器来查看 url。这让我可以为用户保留深层链接/书签，但我通常会让视图事件触发选项卡更改。

出于我的目的，我有一个多标签应用程序，它有一个聊天窗口、图片库窗口和协作编辑窗口。