官方文档的解释:

Web applications often provide linkable, bookmarkable, shareable URLs for important locations in the app. Until recently, hash fragments (#page) were used to provide these permalinks, but with the arrival of the History API, it's now possible to use standard URLs (/page). Backbone.Router provides methods for routing client-side pages, and connecting them to actions and events. For browsers which don't yet support the History API, the Router handles graceful fallback and transparent translation to the fragment version of the URL.

During page load, after your application has finished creating all of its routers, be sure to call Backbone.history.start(), or Backbone.history.start({pushState: true}) to route the initial URL.

简单的无节操的翻译一下

Web应用程序通常提供可链接,可收藏,可共享的URL在应用程序的重要位置。直到最近,散列片段(#page)被用来提供这些永久链接,但随着History API的到来,现在可以使用标准的URL(/页)。 Backbone.Router为客户端的页面提供路由,并将它们与操作、事件连接起来。对于这些浏览器还不支持History API,将转成成哈希片段的方式。

在页面加载后,你的应用程序创建完所有的路由器,一定要调用Backbone.history.start(),或Backbone.history.start({pushState:true}),以便初始化。

router(路由的)意思,显然是能够控制url指向哪个函数的。

在现在的单页应用中,所有的操作、内容都在一个页面上呈现,这意味着浏览器的url始终要定位到当前页面。那么一个页面中的左右的操作总不能都通过事件监听来完成,尤其是对于需要切换页面的场景以及需要分享、收藏固定链接的情况。所以,这便是路由存在的意义。

栗子:

HTML是这样子的

        <a href="#/default/">default</a>
<a href="#/posts/120">Post 120</a>
<a href="#/download/user/images/hey.gif">download gif</a>
<a href="#/dashboard/graph">Load Route/Action View</a>
<a href="#/manual">Manual</a>

然后呢,就是栗子的关键代码

var AppRouter = Backbone.Router.extend({
routes: {
"posts/:id" : "getPost",
"download/*path": "downloadFile", //对应的链接为<a href="#/download/user/images/hey.gif">download gif</a>
":route/:action": "loadView", //对应的链接为<a href="#/dashboard/graph">Load Route/Action View</a>
"manual": "manual",
"*actions": "defaultRoute",
},
getPost: function(id) {
alert(id);
},
defaultRoute : function(actions){
alert(actions);
},
downloadFile: function( path ){
alert(path); // user/images/hey.gif
},
loadView: function( route, action ){
alert(route + "_" + action); // dashboard_graph
},
manual: function() {
alert("call manual");
app_router.navigate("/posts/" + 404, {trigger: true, replace: true});
}
}); var app_router = new AppRouter; Backbone.history.start();

这个例子基本上就把Router的功能描述完整了。

另外Router相当于Controller;因为在早期的版本,是没有Router的,是在0.5版本从Controller改名过来的。

更多地还请移步官方文档。

Backbone.js学习之Router的更多相关文章

  1. 【转】Backbone.js学习笔记(二)细说MVC

    文章转自: http://segmentfault.com/a/1190000002666658 对于初学backbone.js的同学可以先参考我这篇文章:Backbone.js学习笔记(一) Bac ...

  2. Backbone.js学习之二

    经历一段自我修炼,终于领悟到Backbone.js的关键知识点,也发现了原来MVC可以在前端这样梦幻的发挥,Backbone.js确实是一个很有魅力的前端MVC框架. 练就一门技术,需要有扎实的功底, ...

  3. 【转】Backbone.js学习笔记(一)

    文章转自: http://segmentfault.com/a/1190000002386651 基本概念 前言 昨天开始学Backbone.js,写篇笔记记录一下吧,一直对MVC模式挺好奇的,也对j ...

  4. Backbone.js学习之一

    昨天一个我崇拜的朋友,徐飞送我一本名为<Backbone.js实战>书,让我心中狂喜,于是带着这份浓厚的兴趣,开始研究Backbone.js之路. 打开这本书的第一句话就很有哲理,“授人以 ...

  5. backbone.js学习笔记

    之前只接触过jQuery,看来Backbone是除了jQuery的第二大JS框架... backbone到底是个啥? 其实刚开始我也不知道=_=,我是这周二才听说居然还有这么个框架...于是乎我的导师 ...

  6. Backbone.js学习之View

    千呼万唤始出来,终于到最后一个要点View了.照旧,先来一睹官方文档: Backbone views are almost more convention than they are code - t ...

  7. Backbone.js学习之初识hello-world

    说了好久好久要学习Backbone.js,现在终于下定决心开始学习了.然后呢,就根据我的学习进度在这里做个简单的记录,方便新人,也方便我自己以后回忆. 准备 用bower下载这几个库或框架也是醉了.. ...

  8. Backbone.js学习之Backbone.View(视图)

    Backbone.js为复杂WEB应用程序提供模型(models).集合(collections).视图(views)的结构.其中模型用于绑定键值数据和自定义事件:集合附有可枚举函数的丰富API: 视 ...

  9. Backbone.js学习之旅(一)

    前言 刚到粑粑公司,就学习各种框架,进行各种开发,为了纪念挥泪的青春,只好写下…… 希望能合您胃口^_^!!! The First(文件准备) backobone 强制依赖于 underscore.j ...

随机推荐

  1. BP神经网络算法学习

    BP(Back Propagation)网络是1986年由Rumelhart和McCelland为首的科学家小组提出,是一种按误差逆传播算法训练的多层前馈网络,是眼下应用最广泛的神经网络模型之中的一个 ...

  2. mysql中自己定义函数编程

    语法: 新建: Create function function_name(參数列表)returns返回值类型 函数体 函数名,应该合法的标识符,而且不应该与已有的keyword冲突. 一个函数应该属 ...

  3. LintCode 子树

    easy 子树 19% 通过 有两个不同大小的二进制树: T1 有上百万的节点: T2 有好几百的节点.请设计一种算法.判定 T2 是否为 T1的子树. 您在真实的面试中是否遇到过这个题? Yes 例 ...

  4. ibatis 分页的简单实现

    ibatis 物理分页的简单实现 cheungmine 2013-8-26 使用SSI (Struts2, Spring3, iBATIS2.3)框架开发Web服务的时候有一个需求就是对查询得到的结果 ...

  5. 开机就提示“请安装TCP/IP协议,error=10106”的解决的方法

    一.问题描写叙述: 今天开机时提示"请安装TCP/IP协议,error=10106",现象是popo,qq等登录不了,IE浏览器等连不了网,使用ping命令ping其它机器和路由器 ...

  6. [Oracle] - 性能优化工具(2) - ASH

    ASH和AWR的关系 ASH以V$SESSION为基础,每秒採样一次,记录活动会话等待的事件.不活动的会话不会採样,採样工作由新引入的后台进程MMNL来完毕. ASH内存记录数据始终是有限的,为了保存 ...

  7. oc-23-static

    #import <Foundation/Foundation.h> #import "Person.h" int main(int argc, const char * ...

  8. Spring MVC 中 HandlerInterceptorAdapter的使用--转载

    原文地址:http://blog.csdn.net/liuwenbo0920/article/details/7283757 一般情况下,对来自浏览器的请求的拦截,是利用Filter实现的,这种方式可 ...

  9. SimpleUrlHandlerMapping 处理器映射的配置--转

    http://blog.csdn.net/rainier001/article/details/6860491 <?xml version="1.0" encoding=&q ...

  10. LeetCode44 Wildcard Matching

    题目: Implement wildcard pattern matching with support for '?' and '*'. '?' Matches any single charact ...