Backbone.js学习之Router
官方文档的解释:
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的更多相关文章
- 【转】Backbone.js学习笔记(二)细说MVC
文章转自: http://segmentfault.com/a/1190000002666658 对于初学backbone.js的同学可以先参考我这篇文章:Backbone.js学习笔记(一) Bac ...
- Backbone.js学习之二
经历一段自我修炼,终于领悟到Backbone.js的关键知识点,也发现了原来MVC可以在前端这样梦幻的发挥,Backbone.js确实是一个很有魅力的前端MVC框架. 练就一门技术,需要有扎实的功底, ...
- 【转】Backbone.js学习笔记(一)
文章转自: http://segmentfault.com/a/1190000002386651 基本概念 前言 昨天开始学Backbone.js,写篇笔记记录一下吧,一直对MVC模式挺好奇的,也对j ...
- Backbone.js学习之一
昨天一个我崇拜的朋友,徐飞送我一本名为<Backbone.js实战>书,让我心中狂喜,于是带着这份浓厚的兴趣,开始研究Backbone.js之路. 打开这本书的第一句话就很有哲理,“授人以 ...
- backbone.js学习笔记
之前只接触过jQuery,看来Backbone是除了jQuery的第二大JS框架... backbone到底是个啥? 其实刚开始我也不知道=_=,我是这周二才听说居然还有这么个框架...于是乎我的导师 ...
- Backbone.js学习之View
千呼万唤始出来,终于到最后一个要点View了.照旧,先来一睹官方文档: Backbone views are almost more convention than they are code - t ...
- Backbone.js学习之初识hello-world
说了好久好久要学习Backbone.js,现在终于下定决心开始学习了.然后呢,就根据我的学习进度在这里做个简单的记录,方便新人,也方便我自己以后回忆. 准备 用bower下载这几个库或框架也是醉了.. ...
- Backbone.js学习之Backbone.View(视图)
Backbone.js为复杂WEB应用程序提供模型(models).集合(collections).视图(views)的结构.其中模型用于绑定键值数据和自定义事件:集合附有可枚举函数的丰富API: 视 ...
- Backbone.js学习之旅(一)
前言 刚到粑粑公司,就学习各种框架,进行各种开发,为了纪念挥泪的青春,只好写下…… 希望能合您胃口^_^!!! The First(文件准备) backobone 强制依赖于 underscore.j ...
随机推荐
- 在linux下修改oracle的sys和system的密码和用户解锁
修改oracle的sys和system的密码和用户解锁 1.再linux系统上sqlplus '/as sysdba' 进入sqlplus后就可以修改sys和system的密码了 2.alter us ...
- 数据结构复习:希尔排序的C++实现
1.原理介绍 希尔排序又称为缩小增量排序,由D.L.Shell在1959年提出而得名. 该算法先取一个小于数据表中元素个数 n 的整数gap, 并以此作为第一个间隔,将数据分为gap个子序列,所有距离 ...
- hdu 4740 The Donkey of Gui Zhou bfs
The Donkey of Gui Zhou Time Limit: 20 Sec Memory Limit: 256 MB 题目连接 http://acm.hdu.edu.cn/showproble ...
- Codeforces Round #312 (Div. 2) A. Lala Land and Apple Trees 暴力
A. Lala Land and Apple Trees Time Limit: 20 Sec Memory Limit: 256 MB 题目连接 http://codeforces.com/cont ...
- C++ Code_StatusBar
主题 1. 创建状态栏 并显示 2. 在状态栏中显示进度条 3. MDI文档显示和隐藏状态栏 4. 5. 代码::创建状态栏 并显示 //手动添加3个ICON //////////////// ...
- Swift 自己主动引用计数机制ARC
Swift 使用自己主动引用计数(ARC)这一机制来跟踪和管理你的应用程序的内存.通常情况下,Swift 的内存管理机制会一直起着作用,你无须自己来考虑内存的管理.ARC 会在类的实例不再被使用时,自 ...
- 字符集乱码问题:ISO-8859-1和GBK
问题,引用百度知道的问题吧: http://zhidao.baidu.com/question/51342167.html?qbl=relate_question_0&word=%C3%84% ...
- System.Data.SqlClient.SqlError: 备份集中的数据库备份与现有的 'XXX' 数据库不同
System.Data.SqlClient.SqlError: 备份集中的数据库备份与现有的 'XXX' 数据库不同. 1. 删除与要恢复数据库同名的已经存在的数据库:2. 右击“数据库”选择“还原数 ...
- Redis for Windows(C#缓存)安装和使用
Redis for Windows(C#缓存)安装和使用 前言 前段时间写过两篇简单的有关Memcached缓存的相关文章,当然了只是入门的如何使用而已.最近这两天又发现了Redis这个神奇的东西,之 ...
- 剑指 offer set 7 调整数组顺序使奇数位于偶数前面
总结 1. 之前不确定这种题的最终解法, 现在明确了, 就是一次快排