認識Backbone (五)

 　　Backbone.Router（路由）/ Backbone.history（歷史）

　　 Backbone.Router 爲客戶端路由提供了許多方法，並能鏈接到指定的動做（actions）和事件（events）。 對於不支持 History API 的舊瀏覽器，路由提供了優雅的回調函數並能夠透明的進行 URL 片斷的轉換。　

　　頁面加載期間，當應用已經建立了全部的路由，須要調用 Backbone.history.start()，或Backbone.history.start({pushState: true}) 來確保驅動初始化 URL 的路由。想要中止監聽URL的路由，使用 Backbone.history.stop().

　　History 做爲全局路由服務用於處理 hashchange 事件或 pushState，匹配適合的路由，並觸發回調函數。 咱們不須要本身去作這些事情 — 若是使用帶有鍵值對的 路由，Backbone.history 會被自動建立。

<div>
    <a href="#help">help</a>
    <a href="#search/list">list</a>
    <a href="#search/list/p6">list page6</a>
    <a href="#file/image/logo.png">image logo</a>
    <a href="#account/total">account total</a>    
</div>

//action方式綁定URL
var PageRoute = Backbone.Router.extend({
	routes: {
		"help":                 "help",     //1 #help
		"search/:query":        "search",   //2 #search/list
		"search/:query/p:page": "search",   //3 #search/list/p6
		"file/*path": 			 "file",	//4 #file/image/logo.png
		":path/:action": 		 "view"		//5 #account/total
	},
	help: function() {
		console.log('help')
	},
	search: function(query, page) {
		console.log(query +'/'+ page)
	},
	file: function(path){
		console.log(path)
	},
	view: function(path,action){
		console.log(path +'/'+ action)
	}
});
var route = new PageRoute();
Backbone.history.start();

//event方式綁定URL
var PageRoute = Backbone.Router.extend({
    routes: {
        "help":                 "help",     //1 #help
        "search/:query":        "search",   //2 #search/list
        "search/:query/p:page": "search",   //3 #search/list/p6
        "file/*path":            "file",    //4 #file/image/logo.png
        ":path/:action":         "view"     //5 #account/total
    }
});
var route = new PageRoute();
route.on('route:help',function(){
    console.log('help')
});
route.on('route:search',function(query,page){
    console.log(query +'/'+ page)
});
route.on('route:file',function(path){
    console.log(path)
});
route.on('route:view',function(path,action){
    console.log(path +'/'+ action)
});
Backbone.history.start();

　　route router.route(route, name, [callback])  動態修改URL的hash屬性的匹配規則和動做函數。爲路由對象手動建立路由，route 參數能夠是 routing string（路由字符串） 或 正則表達式。 每一個捕捉到的被傳入的路由或正則表達式，都將做爲參數傳入回調函數（callback）。 一旦路由匹配， name 參數會觸發 "route:name" 事件。若是callback參數省略 router[name]將被用來代替。 後來添加的路由能夠覆蓋先前聲明的路由。

var PageRoute = Backbone.Router.extend({
    routes: {
        "help":                 "help",     //1 #help
        "search/:query":        "search",   //2 #search/list
        "search/:query/p:page": "search",   //3 #search/list/p6
        "file/*path":            "file",    //4 #file/image/logo.png
        ":path/:action":         "view"     //5 #account/total
    },
    initialize: function () {
        this.route("help", 'help', function () {
            console.log('oo, help');
        });
    },
    help: function() {
        console.log('help')
    },
    search: function(query,page) {
        console.log(query +'/'+ page)
    },
    file: function(path){
        console.log(path)
    },
    view: function(path,action){
        console.log(path +'/'+ action)
    }
});
var route = new PageRoute();
route.route("search/:query/p:page", 'search', function(query,page){
    console.log('oo, '+ query +'/'+ page)
});
Backbone.history.start();

 　　navigate router.navigate(fragment, [options]) 每當你達到你的應用的一個點時，你想保存爲一個URL，  能夠調用navigate以更新的URL。 若是您也想調用路由功能， 設置trigger選項設置爲true。 無需在瀏覽器的歷史記錄建立條目來更新URL，  設置 replace選項設置爲true。　

var PageRoute = Backbone.Router.extend({
    routes: {
        "help":                 "help",     //1 #help
        "search/:query":        "search",   //2 #search/list
        "search/:query/p:page": "search",   //3 #search/list/p6
        "file/*path":            "file",    //4 #file/image/logo.png
        ":path/:action":         "view"     //5 #account/total
    },
    help: function() {
        console.log('help')
    },
    search: function(query,page) {
        console.log(query +'/'+ page)
    },
    file: function(path){
        console.log(path)
    },
    view: function(path,action){
        console.log(path +'/'+ action)
    }
});
var route = new PageRoute();
setTimeout(function(){
    route.navigate("search/list/p5",{trigger: true});
},2000);
setTimeout(function(){
    route.navigate("help",{trigger: true});
},4000);
Backbone.history.start();