在使用Backbone的过程中,发现原来还可以在Backbone Router中使用正则表达式。
Backbone.Router担任了一部分Controller(控制器)的工作,它一般运行在单页应用中,能将特定的URL或锚点规则绑定到一个指定的方法。
在一开始使用Backbone Router的时候,用的是类似于下面的方法来寝化一个Router
Backbone.Router.extend({
routes: {
"users": "showUsers"
},
showUsers: function() {
UserController.showUsers();
}
});
var UserController = {
showUsers: function() {
var usersView = new UsersView();
usersView.render();
$("#user_list").html(usersView.el);
}
}
而实际上Backbone Router是可以支持regex的
官网中给了一个简单的示例
initialize: function(options) {
this.route("page/:number", "page", function(number){ ... });
this.route(/^(.*?)\/open$/, "open");
},
open: function(id) { ... }
于是接着就对自己的Router进行了一次重构,之前的Router大致如下所示
define([
'jquery',
'underscore',
'backbone',
'js/HomeView.js',
'js/CreateAccountView.js'
],function($, _, Backbone, HomeView, CreateAccountView){
var AppRouter = Backbone.Router.extend({
routes: {
'index': 'homePage',
'account/create': 'Create'
}
});
window.app = new AppRouter();
var initialize = function() {
var router = new AppRouter;
router.on('route:homePage', function() {
new HomeView();
});
router.on('route:Create', function() {
var createAccountView = new CreateAccountView();
createAccountView.render();
});
Backbone.history.start();
};
return {
initialize: initialize
};
});
修改完后的router如下所示:
define([
'jquery',
'underscore',
'backbone',
'js/HomeView.js',
'js/CreateAccountView.js'
],function($, _, Backbone, HomeView, CreateAccountView){
var AppRouter = Backbone.Router.extend({
index: function(){
var homeView = new HomeView();
homeView.initialize();
},
createAccount: function(){
var createAccountView = new CreateAccountView();
createAccountView.render();
},
initialize: function() {
var router = this,
routes = [
[ /^.*$/, "index" ],
[ ":account/create", "createAccount" ]
];
_.each(routes, function(route) {
router.route.apply(router,route);
});
Backbone.history.stop();
Backbone.history.start();
}
});
window.app = new AppRouter();
return AppRouter;
});
围观我的Github Idea墙, 也许,你会遇到心仪的项目