Backbone路由：route小结及案例

Backbone路由：route小结及案例

例子1

varWorkspace = Backbone.Router.extend({

 initialize: function(){

 // #folder/foo-r

this.route("folder/:name-:mode" , "openFolder");

 }

 ,openFolder: function(name, mode){

 // #folder/foo-r ->openFolder: name参数为 foo，mode参数为r

 alert("openFolder: name参数为"+ name + "，mode参数为"+ mode );

 }

});

varworkspace = new Workspace();

Backbone.history.start();

例子2

html:

<ahref="#/117-a/b/c/open" class="link">#/117-a/b/c/open</a>

varWorkspace = Backbone.Router.extend({

 initialize: function(){

 this.route(/^(.*)\/open$/, "open");

 }

 ,open: function(id){

 // 输出：117-a/b/c

 alert(id);

 }

});

varworkspace = new Workspace();

Backbone.history.start();

说明：从上面的例子，按道理传入open方法的参数id应为/117-a/b/c,因为/117-a/b/c/open在正则表达式/^(.*)\/open$/中，（.*）匹配的是/117-a/b/c，其原因在Backbone的getFragment方法：

摘抄一下如下：

getFragment:function(fragment, forcePushState) {

 if(fragment == null) {

 if(this._hasPushState || !this._wantsHashChange || forcePushState) {

 fragment= this.location.pathname;

 varroot = this.root.replace(trailingSlash, '');

 if(!fragment.indexOf(root)) fragment = fragment.substr(root.length);

 }else {

 fragment= this.getHash();

 }

 }

 returnfragment.replace(routeStripper, '');

}

它的fragment.replace(routeStripper,'');语句将/117-a/b/c过滤为117-a/b/c，其中routeStripper为RegExp/^[#\/]|\s+$/g。

例子3

注意：只要没有被routeStripper为RegExp/^[#\/]|\s+$/g 所过滤，#a117-a/b/c/open匹配(.*)为

a117-a/b/c

html:

<ahref="#a117-a/b/c/open" class="link">#/117-a/b/c/open</a>

varWorkspace = Backbone.Router.extend({

 initialize: function(){

 this.route(/^(.*)\/open$/, "open");

 }

 ,open: function(id){

 // 输出：a117-a/b/c

 alert(id);

 }

});

varworkspace = new Workspace();

Backbone.history.start();

本文来源 我爱IT技术网 http://www.52ij.com/jishu/4846.html 转载请保留链接。