声明:
前言:
话说,我是开发hybrid APP,使用Backbone真的好吗?在Hybrid里碰不到路由的问题。
1,History pushState/replaceSate
在学习BackbOne之前,我们要先了解下 H5 最新的 API -- pushState,这个功能解决了什么问题?
众所周知 Ajax的出现,使得我们的页面变得更加的友好和丰富,但是也同样带来了一些问题,比如 浏览器中前进和后退。而 pushState 的出现,就是解决这一问题的方法。
具体用法:
/* ajax载入~~ */ // history处理 var title = "上海3月开盘项目汇总-" + $(this).text().replace(/\d+$/, ""); document.title = title; if (event && /\d/.test(event.button)) { history.pushState({ title: title }, title, location.href.split("?")[0] + "?" + query );
history.replaceSate的方法,是在页面刚初始化的时候,也要对历史记录进行初始化操作,就使用 replaceSate()方法。
2,Backbone.Router
Router 的意思是 路由,在Backbone是控制 Url。
一个简单的代码如下:
var AppRouter = Backbone.Router.extend({ //设置默认的路由规则 routes:{ "*actions":"defaultRoute" //#actions }, defaultRoute:function(actions){ console.log(actions); } }); var app_router = new AppRouter; Backbone.history.start(); //确保驱动初始化URL路由
以上的代码意思是:创建一个路由类,设置其默认路由规则,创建自定义方法,声明一个实例并启动URL路由功能,
routes将带参数的URLs映射到路由实例的方法上,简单的说就是为url绑定事件,其中"*actions" 等于 url(http://xx.html?a=1#ss)#右边的字符。
3,Routes映射传参数
var AppRouter = Backbone.Router.extend({ //设置默认的路由规则 routes:{ "*actions" : "defaultRoute", "search/:query/p:page" : "search", "/getPost/:id" : "getPostId" }, defaultRoute:function(actions){ console.log(actions); }, search:function(query,page){ console.log(page); //search/软件随想录/p2 }, getPostId:function(id){ cosnole.log(id); //getPost/2 } }); var app_router = new AppRouter; Backbone.history.start(); //确保驱动初始化URL路由
从上面已经可以看出来匹配 # 标签之后内容的方法有两种:
第一种:用“:”来把 # 后面对应位置作为参数;
第二种:用“*”,它可以匹配所有的url;
4,看完整的例子
有两个HTML文件,Router.html 和 router_new.html。
Router.html代码如下:
router_new.html代码如下:
至此,Backbone的Route讲解完毕,其中我也碰到过不明白的地方,比如由 Route.html带动参数传入到router_new.html的时候,应该输出带过的值才对,但是输出的却是完整的路径?