Backbone系列：Router的学习

Router的学习

本章通过定义简单的路由规则，学习Router
在线demo：router学习

Backbone的路由会监听URL的"#"后面的部分

var App = Backbone.Router.extend({
// 定义路由、动作的键值对，注意路由前面没有"/"
// *表示通配，会匹配多个url组件
routes: {
'*actions': 'defaultRoute' // 匹配所有含#的url，并把#后面作为动作
},
// 定义路由被匹配时，触发的对应的动作
defaultRoute: function(actions) {
alert(actions);
}
});
var app = new App();

// 需要调用该方法来初始化URL路由
Backbone.history.start();

这样打开页面时，就会alert"#"后面的参数。

在匹配路由时，会触发一个基于动作名称的event，所以我们也能监听这个路由，绑定对应的处理函数。所以下面的函数也能达到同样的效果

var App = Backbone.Router.extend({
// 定义路由、动作的键值对
// *表示通配，会匹配多个url组件
routes: {
'*actions': 'defaultRoute' // 匹配所有含#的url，并把#后面作为动作
}
});
var app = new App();
// 监听基于动作名称的事件，绑定处理程序也能达到同样的效果
app.on('route:defaultRoute', function(actions) {
alert(actions);
});

// 需要调用该方法来初始化URL路由
Backbone.history.start();

但如果Router类定义了路由的对应动作，基于动作名称的event也绑定的处理程序，他们并不会覆盖，而是先触发路由定义的动作，再触发event事件

var App = Backbone.Router.extend({
// 定义路由、动作的键值对
// *表示通配，会匹配多个url组件
routes: {
'*actions': 'defaultRoute' // 匹配所有含#的url，并把#后面作为动作
},
defaultRoute: function(actions) {
alert('我会先被触发');
}
});
var app = new App();
// 监听基于动作名称的事件，绑定处理程序也能达到同样的效果
app.on('route:defaultRoute', function(actions) {
alert('然后我再被触发');
});

// 需要调用该方法来初始化URL路由
Backbone.history.start();

上面的代码，只要路由匹配，会先后弹出两个alert框

动态路由

有时我们需要根据不同的哈希值，做不同的动作，所以我们可以在routes中定义匹配不同的url，然后定义对应的动作

var App = Backbone.Router.extend({
// 定义路由、动作的键值对
// *表示通配，会匹配多个url组件
routes: {
// http://joezheng2015.github.io/learningBackbone/demos/view/router.html#post/120 'post/:id': 'doPost', // 注意*会匹配所有url，所以应该放在最后面
'*actions': 'defaultRoute' // 匹配所有含#的url，并把#后面作为动作
},
defaultRoute: function(actions) {
alert(actions);
},
doPost: function(id) {
alert('你post了：' + id); // 120
}
});
var app = new App();

// 需要调用该方法来初始化URL路由
Backbone.history.start();