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();