Backbone
中的 Router
充当路由的作用,控制 URL
的走向,当在 URL
中使用 #
标签时生效。
定义 Router
至少需要一个 Router
和一个函数来映射特定的 URL
,而且我们需要记住,在 Backbone
中,#
标签后的任意字符都会被 Router
接收并解释。
下面我们来定义一个 Router
:
<script>
var AppRouter = Backbone.Router.extend({
routes: {
"*actions": "defaultRoute" // 匹配 http://example.com/#anything-here
}
});
// 实例化 Router
var app_router = new AppRouter;
app_router.on('route:defaultRoute', function(actions) {
alert(actions);
})
// 打开 Backbone 的历史记录
Backbone.history.start();
</script>
现在,我们就定义好了一个 Router
了,但此时 Router
并未匹配特定的 URL
,接下来我们开始详细讲解 Router
是如何工作的。
动态路由选择
Backbone
允许你定义带有特定参数的 Router
。例如,你可能希望通过一个特定的 id
接收一个 post
,比如这样一个 URL:"http://example.com/#/posts/12"
,一旦这个 Router
被激活,你就可以取得一个 id
为12的 post
。接下来,我们就来定义这个 Router:
<script>
var AppRouter = Backbone.Router.extend({
routes: {
"posts/:id": "getPost",
"*actions": "defaultRoute" //Backbone 会根据顺序匹配路由
}
});
// 实例化 Router
var app_router = new AppRouter;
app_router.on('route:getPost', function (id) {
// 注意,参数通过这里进行传递
alert( "Get post number " + id );
});
app_router.on('route:defaultRoute', function (actions) {
alert( actions );
});
// 打开 Backbone 的历史记录
Backbone.history.start();
</script>
匹配规则
Backbone
使用两种形式的变量来设置 Router
的匹配规则。第一种是 :
,它可以匹配 URL 中斜杠之间的任意参数,另一种是 *
,它用来匹配斜杠后面的所有部分。注意,由于第二种形式的模糊性大于第一种,所以它的匹配优先级最低。
任一形式匹配的结果会以参数的形式传递到相关的函数中,第一种规则可能返回一个或多个参数,第二种规则将整个匹配结果作为一个参数返回。
接下来,我们用实例来说明:
routes:{
"posts/:id": "getPost",
// <a href="http://example.com/#/posts/121">Example</a>
"download/*path": "downloadFile",
// <a href="http://example.com/#/download/user/images/hey.gif">Download</a>
":route/:action": "loadView",
// <a href="http://example.com/#/dashboard/graph">Load Route/Action View</a>
},
app_router.on('route:getPost', function( id ){
alert(id); // 匹配后,传递过来的参数为 12
});
app_router.on('route:downloadFile', function( path ){
alert(path); // 匹配后,整个匹配结果作为一个参数返回,路径为 user/images/hey.gif
});
app_router.on('route:loadView', function( route, action ){
alert(route + "_" + action); // 匹配后,传递过来两个参数,此时会弹出 dashboard_graph
});