Router的學習

本章通過定義簡單的路由規則，學習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();