Backbone.js：嵌套视图的路由答案

【问题标题】：Backbone.js: Routing for nested viewsBackbone.js：嵌套视图的路由
【发布时间】：2013-01-22 14:32:46
【问题描述】：

我正在尝试找出以下场景：

假设我有两种视图：一种用于查看商品，另一种用于购买商品。问题是购买视图是查看的子视图。

对于路由我有：

var MyRouter = Backbone.Router.extend({
  routes: {
    'item/:id': 'viewRoute',
    'item/:id/buy': 'buyRoute'
  }
});

var router = new MyRouter;

router.on("route:viewRoute", function() {
  // initialize main view
  App.mainview = new ViewItemView();

});

router.on("route:buyRoute", function() {
  // initialize sub view
  App.subview = new BuyItemView();
});

现在如果用户刷新页面并且buyRoute 被触发但现在没有主视图。处理这个问题的最佳解决方案是什么？

【问题讨论】：

标签： javascript backbone.js backbone-views

【解决方案1】：

我想您现在遇到的问题是您不想在 BuyView 中显示 ViewItem 中的某些内容？如果是这样，那么您应该将 BuyView 和 ViewItem 的共同点模块化到另一个 View 中，然后在这两个路由上对其进行初始化。

这是我的一个应用程序的代码示例

https://github.com/QuynhNguyen/Team-Collaboration/blob/master/app/scripts/routes/app-router.coffee

如您所见，我将侧边栏模块化，因为它可以在多个视图之间共享。我这样做是为了它可以重复使用并且不会引起任何冲突。

【讨论】：

【解决方案2】：

您可以检查主视图是否存在，如果它不存在则创建/打开它。

我通常在启动应用程序时创建（但不打开）我的应用程序的主要视图，然后创建某种用于打开/关闭的视图管理器。对于小型项目，我只是将我的视图附加到我的 app 对象的 views 属性上，这样它们就都在一个地方，可以通过 views.mainView、views.anotherView 等方式访问。

我还使用两种方法扩展 Backbone.View：open 和 close，它们不仅可以向 DOM 追加/删除视图，还可以在视图上设置 isOpen 标志。

有了这个，你可以检查需要的视图是否已经打开，如果没有打开它，像这样：

if (!app.views.mainView.isOpen) {
    // 
}

一个可选的添加是在您的应用程序上创建一个名为clearViews 的方法，该方法清除所有打开的视图，可能除了作为参数传递给clearViews 的视图名称之外。因此，如果您不想在某些路线上清除导航栏视图，则只需致电 app.clearViews('topNav')，除 views.topNav 之外的所有视图都将关闭。

查看此要点以获取所有这些的代码：https://gist.github.com/4597606

【讨论】：