在现在的单页应用中所有的操作、内容都在一个页面上呈现这意味着浏览器的url始终要定位到当前页面。那么一个页面中的左右的操作总不能都通过事件监听来完成尤其是对于需要切换页面的场景以及需要分享、收藏固定链接的情况。因此就有了router通过hash的方式即#page来完成。不过随着浏览器发展大多数的浏览器已经可以通过history api来操控url的改变可以直接使用 /page 来完成之前需要hash来完成的操作这种方式看起来更为直观一些。下面提供过几个demo来切实体会一番。
4.1 一个简单的例子
var AppRouter Backbone.Router.extend({routes: {"*actions" : "defaultRoute"},defaultRoute : function(actions){alert(actions);}});var app_router new AppRouter;Backbone.history.start();
需要通过调用Backbone.history.start()方法来初始化这个Router。
在页面上需要有这样的a标签
testActions
点击该链接时便会触发defaultRouter这个方法。
4.2 这个routes映射要怎么传参数
看下面例子立马你就知道了
var AppRouter Backbone.Router.extend({routes: {"posts/:id" : "getPost","*actions" : "defaultRoute"},getPost: function(id) {alert(id);},defaultRoute : function(actions){alert(actions);}});var app_router new AppRouter;Backbone.history.start();
对应的页面上应该有一个超链接
Post 120
从上面已经可以看到匹配#标签之后内容的方法有两种一种是用“:”来把#后面的对应的位置作为参数还有一种是“*”它可以匹配所有的url下面再来演练一下。
var AppRouter Backbone.Router.extend({routes: {"posts/:id" : "getPost",//下面对应的链接为download gif"download/*path": "downloadFile",//下面对应的链接为Load Route/Action View":route/:action": "loadView","*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}});var app_router new AppRouter;Backbone.history.start();
4.3 手动触发router
上面的例子都是通过页面点击触发router到对应的方法上在实际的使用中还存在一种场景就是需要在某一个逻辑中触发某一个事件就像是jQuery中得trigger一样下面的代码展示怎么手动触发router。
routes: {"posts/:id" : "getPost","manual": "manual","*actions": "defaultRoute",},// 省略部分代码loadView: function( route, action ){alert(route "_" action); // dashboard_graph},manual: function() {alert("call manual");app_router.navigate("/posts/" 404, {trigger: true, replace: true});}
对应着在页面添加一个a标签 manual 然后点击这个链接便会触发posts/:id对应的方法。
这里需要解释的是navigate后面的两个参数。trigger表示触发事件如果为false则只是url变化并不会触发事件replace表示url替换而不是前进到这个url意味着启用该参数浏览器的history不会记录这个变动。
完整代码依然在 code 中可以找到。
导航
- 上一章 03 Backbonejs中的Collections实践
- 下一章 05 Backbonejs中的View实践