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 ...
随机推荐
- PostgreSQL没有redo log multiplexing
与Oracle不同的是,PostgreSQL中压根没有这种的东西. 若以,如果因为写在线WAL文件是发生磁盘I/O错误,那么数据库系统就启动不了了. 解决的办法,我想,在PostgreSQL中,如论如 ...
- centos 没有可用的网络设备
在重装的时候记得查看网络情况,提示没有可用的网络设备. 系统是64位的,我再创建虚拟机选择客户机操作系统的时候,选择成了 centos .不是centos 64位.改成centos 64位后,就显示了 ...
- C#取真实IP地址及分析
说一哈,我也是转来的,不是想骗PV,方便自己查而已! 目前网上流行的所谓"取真实IP地址"的方法,都有bug,没有考虑到多层透明代理的情况. 多数代码类似: string IpAd ...
- Sqlserver事务发布实现数据同步
事务的功能在sqlserver中由来已久,因为最近在做一个数据同步方案,所以有机会再次研究一下它以及快照等,发现还是有很多不错的功能和改进的.这 里以sqlserver2008的事务发布功能为例,对发 ...
- android安卓最新快捷环境搭建(转)
现在很多视频和文章上的安卓环境搭建还是比较老的,挺麻烦.现在写快速方便的搭建: 一.下载JDK: 网址:http://www.oracle.com/technetwork/java/javase/do ...
- WCF摘记
//绑定形式 NetTcpBinding bind = new NetTcpBinding(); //地址 EndpointAddress address = new EndpointAddress( ...
- 自增锁预分配ID
http://www.cnblogs.com/xpchild/p/3825309.html mysql> show create table pp; CREATE TABLE `pp` ( `i ...
- 解决ntfs格式的移动硬盘mount到Linux下时变成只读文件系统的问题
环境介绍 主机: XP 虚拟机:VirtualBox+Debian6 遇到的问题 我有一块西部数据的移动硬盘,虚拟机中有一些资料需要拷贝到移动硬盘中,然后我将移动硬盘插上后,执行如下设置,将移动硬盘分 ...
- 多线程和并发管理 .NET多线程服务
线程相关静态变量 默认静态变量应用程序域所有线程可见.如果静态变量需要在线程间共享,同步访问也就必然了. 线程相关静态变量保证线程安全,同一时间只有一个线程可访问,且每个线程都有该静态变量的拷贝. p ...
- gridview_RowCommand 获取当前行中的控件
<asp:GridView ID="gvStorglog" runat="server" Width="100%" SkinID=&q ...