• 认识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();
    
  • 相关阅读:
    理解SetCapture、ReleaseCapture、GetCapture(控制了消息发往哪个窗口,是理解消息的关键)
    Javascript 的addEventListener()及attachEvent()区别分析
    鼠标拖拽
    鼠标右键菜单
    keydown
    一串跟随鼠标的DIV
    event对象和事件冒泡
    发表说说
    文档流
    CSS3 @keyframes 规则
  • 原文地址:https://www.cnblogs.com/eyeear/p/4701910.html
Copyright © 2020-2023  润新知