如何构建 Backbone Marionette 应用程序？答案

【问题标题】：How to structure a Backbone Marionette application?如何构建 Backbone Marionette 应用程序？
【发布时间】：2013-01-28 13:55:15
【问题描述】：

我有一个想要使用 Backbone Marionette 创建的应用程序。基本上，它的 UI 结构非常简单。有：

两个顶级区域，一个用于菜单，另一个用于内容
菜单区域显示菜单视图
内容区域显示两个相邻的视图
- 左边是子导航
- 右边是实际内容

例如，菜单可能会在应用程序的两个部分之间切换，例如“邮件”、“日历”和“联系人”。这些部分中的每一个都有自己的子导航，应显示在子导航视图中，并且每个部分都有一个默认视图。例如，在“邮件”部分，这可能是“收件箱”视图，在“日历”部分，这可能是“月”视图。

所以，一般来说，我们有一个嵌套导航。

如何使用路由器实现这一点？

我的想法是有一个应用级路由器，它只为#mail 和#calendar 等部分提供路由。

子导航视图应该有自己的路由器。因此，例如，邮件子导航视图可以有一个用于inbox 和sent 的路由器。

最后我想有#mail/inbox这样的路由，但是第一部分应该由顶级路由器处理，第二部分应该由下级路由器处理。

我的问题是我是否可以嵌套路由器以使子级路由器不需要知道诸如“邮件”之类的URL前缀，并且发生级联路由。这可能吗？

或者这种方法完全错误？

【问题讨论】：

标签： backbone.js marionette

【解决方案1】：

我不知道 Marionette 是否有解决方案，但有一个名为 Backbone.subroute 的插件，它提供了您正在寻找的功能。

以这种方式分隔子路由是一种合法的模式，我以前也使用过。然而，我已经得出结论，在主应用程序路由器中拥有每个部分的“主”路由并不是要走的路，因为它将应该一起存在的关注点分开。相反，我已经开始为路由器实现一个通用基类，它提供了一个“根”URL：

var BaseRouter = Backbone.Router.extend({

    //Root path for all routes defined by this router. Override this in a deriving
    //class for keeping route table DRY.
    urlRoot: undefined,

    //override the route method to prefix the route URL
    route: function(route, name, callback) {
      if(this.urlRoot) {
        route = (route === '' ? this.urlRoot : this.urlRoot + "/" + route);
      }

      //define route
      Backbone.Router.prototype.route.call(this, route, name, callback);

      //also support URLs with trailing slashes
      Backbone.Router.prototype.route.call(this, route + "/", name, callback);
    }
});

用法：

var CalendarRouter = BaseRouter.extend({
    //all routes will be relative to "calendar"
    urlRoot:"calendar",
    routes: {
        //...
    }
}):

当然，就我而言，这也是有道理的，因为我在基类中定义了其他常见的路由器任务。只是为了避免为每个路由 url 输入额外的“日历”前缀并不能保证这样做。

编辑： 澄清一下，Backbone.SubRoute 插件不会强制您在主路由器中定义根路由，您可以像我建议的基类一样使用它.但如果你想要的只是一个路由前缀，那么基类是一个更轻、更简单的解决方案。

【讨论】：