认识 Backbone(三) : 什么是 Router

Backbone 中的 Router 充当路由的作用,控制 URL 的走向,当在 URL 中使用 # 标签时生效。
定义 Router 至少需要一个 Router 和一个函数来映射特定的 URL,而且我们需要记住,在 Backbone 中,# 标签后的任意字符都会被 Router 接收并解释。
下面我们来定义一个 Router


现在,我们就定义好了一个 Router 了,但此时 Router 并未匹配特定的 URL,接下来我们开始详细讲解 Router 是如何工作的。

动态路由选择

Backbone 允许你定义带有特定参数的 Router。例如,你可能希望通过一个特定的 id 接收一个 post,比如这样一个 URL:"http://example.com/#/posts/12",一旦这个 Router 被激活,你就可以取得一个 id 为12的 post。接下来,我们就来定义这个 Router:


匹配规则

Backbone 使用两种形式的变量来设置 Router 的匹配规则。第一种是 :,它可以匹配 URL 中斜杠之间的任意参数,另一种是 *,它用来匹配斜杠后面的所有部分。注意,由于第二种形式的模糊性大于第一种,所以它的匹配优先级最低。
任一形式匹配的结果会以参数的形式传递到相关的函数中,第一种规则可能返回一个或多个参数,第二种规则将整个匹配结果作为一个参数返回。
接下来,我们用实例来说明:

routes:{

    "posts/:id": "getPost",
    // Example

    "download/*path": "downloadFile",
    // Download

    ":route/:action": "loadView",
    // Load Route/Action View

},

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 
});

参考

http://backbonetutorials.com/what-is-a-router/#/posts/120

你可能感兴趣的:(javascript,backbone)