简单的Backbone.js路由器？ （页面层次结构+查询字符串）

Question

如何设置可以处理以下URL的Backbone路由器：

example.com/#!/story-1/?a=1&b=2

或最好使用子页面URL支持：

example.com/#!/chapter-1/story-1/?a=1&b=2

我基本上想要一种简单的方法来定义带有相关查询字符串的页面。

默认情况下是支持还是我应该使用此添加还是其他添加？ https://github.com/documentcloud/backbone/pull/668

最终结果应该是：

1. 请求的资源：
   ！example.com /＃/章节-1 /层1 / A = 1＆安培; B = 2

2. 解析并查看它是否与页面对象中的页面匹配：
   页数：{   chapter-1_story-1：{      模板：＃template1   } }

3. 使用查询字符串加载页面模板和页面控制器：
   PageController.load（模板，参数）

Answer 1

来自pull request #668的@ phudson8创建了backbone-query-parameters插件。

这很简单，只需将backbone.queryparams.js复制到您的环境中并包含在backbone.js之后。

Answer 2

来自文档：

For example, a route of "search/:query/p:page" will match a fragment of 
#search/obama/p2, passing "obama" and "2" to the action. A route of 
"file/*path" will match #file/nested/folder/file.txt, passing 
"nested/folder/file.txt" to the action.

因此你可以使用这样的变量：

 routes:{
   'search/:query/:page': 'handlePages'
 }

或这样的路径：

 routes:{
   'search/*path': 'handlePages'
 }

但我不知道任何查询字符串处理。

Answer 3

您可能需要绘制另一条包含“？”的路线和伪url params的splat。例如，这是一个可以扩展Router的函数，它将遍历您的routes对象，并为每个查询字符串绘制一条额外的路由。它还将解析url params并将它们作为路由方法的最终参数传递。

mapRoutesWithParams: function() {
  _.each(_.keys(this.routes), function(route) {
    this.route(route+'?*params', // draw the route with a query string
      this.routes[route],
      function() {
        var args = _.toArray(arguments);
        var params = args.pop();
        var paramsObject = _(params.split('&')).reduce(function(memo, pair) {
          memo[pair.split('=')[0]] = pair.split('=')[1]; return memo;
        }, {});
        return this[this.routes[route]].apply(this, args.concat(paramsObject));
      }
    );
  }, this);
}