Backbone.js:嵌套视图的路由

时间:2013-01-22 14:32:46

标签: javascript backbone.js backbone-views

我正在尝试找出以下情况:

假设我有两种观点:一种用于查看物品,另一种用于购买物品。问题在于购买视图是用于查看的子视图。

路由我有:

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被触发,但现在没有主视图。处理这个问题的最佳解决方案是什么?

2 个答案:

答案 0 :(得分:1)

我认为你现在遇到的问题是你不想在BuyView里面显示ViewItem里面的一些东西吗?如果是这样,那么你应该将BuyView和ViewItem的共同点模块化到另一个View中,然后在这两个路径上初始化它。

以下是我的某个应用

的代码示例

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

正如您所看到的,我将侧边栏模块化,因为它可以在许多视图中共享。我这样做是为了可以重复使用,不会引起任何冲突。

答案 1 :(得分:0)

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

我通常在启动应用程序时创建(但不要打开)我的应用程序的主要视图,然后创建一些用于打开/关闭的视图管理器。对于小项目,我只是将我的视图附加到我的app对象的views属性,以便它们都在一个位置,可以作为views.mainView,views.anotherView等访问。

我还使用两种方法扩展Backbone.View:openclose,不仅可以向DOM添加/删除视图,还可以在视图上设置isOpen标志

有了这个,您可以查看是否已打开所需的视图,如果没有,则打开它,如下所示:

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

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

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