Backbone.js 路由器匹配可选参数答案

【问题标题】：Backbone.js Router Matching Optional ParametersBackbone.js 路由器匹配可选参数
【发布时间】：2012-03-27 18:55:48
【问题描述】：

我正在尝试创建一个可以匹配可选参数的骨干路由器。

考虑以下代码：

routes: {  
  '/jobs'                                     : 'jobs',
  '/jobs/p:page'                              : 'jobs',
  '/jobs/job/:job_id'                         : 'jobs',
  '/jobs/p:page/job/:job_id'                  : 'jobs'
}

jobs: function(page, job_id){
   // do stuff here ....
}

如果我导航到 URL abc.com/#/jobs/p104/，page 参数将为 104。但是，如果导航到 abc.com/#/jobs/job/93，job_id 参数为 undefined，但 page 参数为 93。

所以 Backbone 的路由器基本上是按顺序而不是按名称匹配路由哈希参数。

我知道解决方案是使用 *splat 并使用正则表达式拆分参数，但我似乎无法让正则表达式部分工作（我的正则表达式非常生锈）。有人可以帮忙吗？

如果有比使用 *splat 更好的解决方案，有人可以分享吗？

【问题讨论】：

Backbone 0.9.9 具有使用 () 的可选参数。例如 /jobs(/p:page)(/job/:job_id)
@opengrid - 知道如何在路由处理函数中处理可选参数吗？
@mikeyUX 你是什么意思？将它们的名称添加为函数参数应该可以解决问题

标签： javascript regex backbone.js routes

【解决方案1】：

与其搞乱正则表达式，不如仅仅拥有第二个函数会更容易，更不容易出错。您可能必须在初始化函数中绑定所有 this 才能使 this.jobs 工作。

routes: {  
  '/jobs'                                     : 'jobs',
  '/jobs/p:page'                              : 'jobs',
  '/jobs/job/:job_id'                         : 'jobsId',
  '/jobs/p:page/job/:job_id'                  : 'jobs'
},

jobs: function(page, job_id){
   // do stuff here ....
},

jobsId: function(page, job_id){
   this.jobs(undefined, job_id
}

【讨论】：

如果有：/jobs 列表和一个常规的分页查询字符串参数（因为它驱动视图而不是内容），例如 /jobs?page=10 .对于某个工作，按照惯例使用 /jobs/ 。因为对于分页，您可能还需要更多参数，例如偏移量或行数。你也可以有过滤器选项。您不想将所有这些都添加到您的路径中，即使是主干。 github.com/jhudson8/backbone-query-parameters 可能会有所帮助。

【解决方案2】：

试试这个（单个正则表达式，适用于所有输入格式）

var re = /\/jobs(?:\/p(\d+))?.*?(?:\/(\d+)|$)/;
var matches = 'abc.com/#/jobs/p104/4'.match(re);
var page=false;var job=false;
if (matches != null) {
    var page = matches[1] || false;
    var job = matches[2] || false;
}; 
alert("page:" + page + ",job:" + job)

**首先匹配 pNNN 段（如果它存在），并使用带有点 . 的非贪婪量词，它可以吃任何东西 .*? 一个一个地爬上字符串，这样第二组（只是 / NNN) 也将匹配（如果存在）。 (?: exp ) 是非捕获组，它们分组，但它们不“记住”任何东西。

【讨论】：

当我详细阐述时，我还修复了正则表达式（添加字符串锚的结尾以强制最后一个组匹配，如果存在）

【解决方案3】：

如果你打算做很多这样的事情，你可以看看this pattern 来整理它们。但是，对于这些，以下正则表达式应该这样做：

/\/jobs\/p(\d+)/              => /jobs/pXXX
/\/jobs\/p(\d+)\/job\/(\d+)/  => /jobs/pXXX/job/XXX

然后，您可以将 String.match 与您检索到的 splats 一起使用，以提取有问题的 url 片段。使用字符串代替 splat 变量：

var matches = '/jobs/p18'.match(/\/jobs\/p(\d+)/);
var page = matches[1];

var matches = '/jobs/p4/job/6/'.match(/\/jobs\/p(\d+)\/job\/(\d+)/);
var page = matches[1];
var job = matches[2];

【讨论】：