3

我已经开发大型 Backbone Marionette 应用程序大约一年了。一直具有挑战性的一件事是传递路线中视图状态的选项。视图状态选项的示例是活动选项卡、临时选择的项目或页面上需要可链接的排序选项。

在更新到 Backbone 0.9.9+ 之前，我发现处理这些情况的最佳方法是将查询参数添加到路由的末尾。我的路由器看起来像这样：

"/questions/:id/"         : "showQuestions"
"/questions/:id/?*params" : "showQuestionsWithFilters"

这将匹配如下内容：

"/questions/1/?search=help&sort=name"

我发现这样做的真正优势是路由器将根据 url 参数的存在匹配不同的路由。清除所有url参数，然后触发导航，实际上会导致路由改变。

在 Backbone 0.9.2 之后，路由器不再识别 url 参数。在上面的示例中，无论是否存在 url 参数，都会触发“showQuestions”方法。这个 GH 问题的普遍共识（https://github.com/documentcloud/backbone/issues/891）和 Backbone 贡献者的意见似乎是 url 参数根本不应该在客户端使用，而是全部需要传递给视图的信息应存储在主 url 路径（https://github.com/documentcloud/backbone/issues/2440）中。

使用此方法的路由器可能类似于：

"/questions/:id/(search/:term)(sort/:type/)"

这种方法的问题是每个可选参数都需要显式添加到路由器，并且所有参数必须相应地排序，否则它们将不匹配。因为路由和它的选项之间没有轮廓线，并且顺序是由路由器决定的，所以动态添加或编辑选项似乎是不必要的困难。

在这一点上，我被困在保持我当前的 url 结构和试图找出一种让它工作的方法或迁移到后一种方法之间。在我朝任何一个方向走得太远之前，我想知道是否对类似用例的最佳实践还有其他意见。你会推荐什么？

4

1 回答 1

2

还有一条路线称为 splat。来自http://backbonejs.org/#Router：

路由可以包含参数部分，:param，它匹配斜杠之间的单个 URL 组件；和 splat 部分 *splat，可以匹配任意数量的 URL 组件。

在我的应用程序中，我使用了一个必需的参数，然后是任意数量的可选“过滤器”：

var BrowseRouter = Marionette.AppRouter.extend({
  appRoutes: {
    'browse/:page(/*filters)': 'browse'
  }
});

然后，我的 URL 被格式化为一系列由斜杠分隔的键/值对：#/browse/3/type:image/sort:date/count:24。

在我的控制器中，我向函数传递了两个参数：page和filters. page是一个简单的值（“3”）。filters是可选的，是一个较长的字符串，包含页面值之后的所有内容（“type:image/sort:date/count:2”）。

我有一个“explode”下划线混合来获取该字符串并将其转换为一个对象。

_.mixin({
  /*
   * Take a formatted string (from the URL) and convert it into an object of
   * key/val pairs. If the val looks like an array, make it so.
   * _.explode("count:105/sort:date/type:image,video")
   * => { count: 105, sort: date, type: ['image','video']}
   */
  explode: function(str) {
    var result = {};
    if(!str){
        return result;
    }
    _.each(str.split('/'), function(element, index, list){
      if(element){
        var param = element.split(':');
        var key = param[0];
        var val = param[1];
        if (val.indexOf(",") !== -1) {
          val = val.split(',');
        }
        result[key] = val;
      }
    });
    return result;
  }
});
于 2013-04-03T20:34:14.133 回答