Backbone.Router(路由)/ Backbone.history(历史)
Backbone.Router 为客户端路由提供了许多方法,并能连接到指定的动作(actions)和事件(events)。 对于不支持 History API 的旧浏览器,路由提供了优雅的回调函数并可以透明的进行 URL 片段的转换。
页面加载期间,当应用已经创建了所有的路由,需要调用 Backbone.history.start(),或Backbone.history.start({pushState: true}) 来确保驱动初始化 URL 的路由。想要停止监听URL的路由,使用 Backbone.history.stop().
History 作为全局路由服务用于处理 hashchange 事件或 pushState,匹配适合的路由,并触发回调函数。 我们不需要自己去做这些事情 — 如果使用带有键值对的 路由,Backbone.history 会被自动创建。
<div> <a href="#help">help</a> <a href="#search/list">list</a> <a href="#search/list/p6">list page6</a> <a href="#file/image/logo.png">image logo</a> <a href="#account/total">account total</a> </div>
//action方式绑定URL var PageRoute = Backbone.Router.extend({ routes: { "help": "help", //1 #help "search/:query": "search", //2 #search/list "search/:query/p:page": "search", //3 #search/list/p6 "file/*path": "file", //4 #file/image/logo.png ":path/:action": "view" //5 #account/total }, help: function() { console.log('help') }, search: function(query, page) { console.log(query +'/'+ page) }, file: function(path){ console.log(path) }, view: function(path,action){ console.log(path +'/'+ action) } }); var route = new PageRoute(); Backbone.history.start(); //event方式绑定URL var PageRoute = Backbone.Router.extend({ routes: { "help": "help", //1 #help "search/:query": "search", //2 #search/list "search/:query/p:page": "search", //3 #search/list/p6 "file/*path": "file", //4 #file/image/logo.png ":path/:action": "view" //5 #account/total } }); var route = new PageRoute(); route.on('route:help',function(){ console.log('help') }); route.on('route:search',function(query,page){ console.log(query +'/'+ page) }); route.on('route:file',function(path){ console.log(path) }); route.on('route:view',function(path,action){ console.log(path +'/'+ action) }); Backbone.history.start();
route router.route(route, name, [callback])
动态修改URL的hash属性的匹配规则和动作函数。为路由对象手动创建路由,route 参数可以是 routing string(路由字符串) 或 正则表达式。 每个捕捉到的被传入的路由或正则表达式,都将作为参数传入回调函数(callback)。 一旦路由匹配, name 参数会触发 "route:name" 事件。如果callback参数省略 router[name]将被用来代替。 后来添加的路由可以覆盖先前声明的路由。
var PageRoute = Backbone.Router.extend({ routes: { "help": "help", //1 #help "search/:query": "search", //2 #search/list "search/:query/p:page": "search", //3 #search/list/p6 "file/*path": "file", //4 #file/image/logo.png ":path/:action": "view" //5 #account/total }, initialize: function () { this.route("help", 'help', function () { console.log('oo, help'); }); }, help: function() { console.log('help') }, search: function(query,page) { console.log(query +'/'+ page) }, file: function(path){ console.log(path) }, view: function(path,action){ console.log(path +'/'+ action) } }); var route = new PageRoute(); route.route("search/:query/p:page", 'search', function(query,page){ console.log('oo, '+ query +'/'+ page) }); Backbone.history.start();
navigate router.navigate(fragment, [options])
每当你达到你的应用的一个点时,你想保存为一个URL, 可以调用navigate以更新的URL。 如果您也想调用路由功能, 设置trigger选项设置为true。 无需在浏览器的历史记录创建条目来更新URL, 设置 replace选项设置为true。
var PageRoute = Backbone.Router.extend({ routes: { "help": "help", //1 #help "search/:query": "search", //2 #search/list "search/:query/p:page": "search", //3 #search/list/p6 "file/*path": "file", //4 #file/image/logo.png ":path/:action": "view" //5 #account/total }, help: function() { console.log('help') }, search: function(query,page) { console.log(query +'/'+ page) }, file: function(path){ console.log(path) }, view: function(path,action){ console.log(path +'/'+ action) } }); var route = new PageRoute(); setTimeout(function(){ route.navigate("search/list/p5",{trigger: true}); },2000); setTimeout(function(){ route.navigate("help",{trigger: true}); },4000); Backbone.history.start();