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