Backbone 的使用 (四)—— Route 篇

这里其实和我们熟悉的路由大同小异,也是利用hash 来操作。
看下面这个例子

var AppRouter = Backbone.Router.extend({  
    routes : {  
        '' : 'main',  
        'topic' : 'renderList',  
        'topic/:id' : 'renderDetail',  
        '*error' : 'renderError'  
    },  
    main : function() {  
        console.log('应用入口方法');  
    },  
    renderList : function() {  
        console.log('渲染列表方法');  
    },  
    renderDetail : function(id) {  
        console.log('渲染详情方法, id为: ' + id);  
    },  
    renderError : function(error) {  
        console.log('URL错误, 错误信息: ' + error);  
    }  
});  
  
var router = new AppRouter();  
Backbone.history.start(); 

将例子中的代码复制到你的页面中。假设你的页面地址为http://localhost/index.html,请依次访问下面的地址,并注意控制台的输出结果:

http://localhost/index.html // 输出:应用入口方法
http://localhost/index.html#topic // 输出:渲染列表方法
http://localhost/index.html#topic/1023 // 输出:渲染详情方法, id为:1023
http://localhost/index.html#about // 输出:URL错误, 错误信息: about

如果上面没问题 route 就没有什么问题了,接下来就是几个function 需要了解一下:

  • route()方法
    在设定好路由规则之后,如果需要动态调整,可以调用Router.route()方法来动态添加路由规则及Action方法,例如:
router.route('topic/:pageno/:pagesize', 'page', function(pageno, pagesize){  
    // todo  
}); 
// 或者 正则
router.route(/^topic/(.*?)/(.*?)$/, 'page', function(pageno, pagesize){  
    // todo  
}); 
  • navigate()方法
    上面的例子都是通过页面点击触发router到对应的方法上,在实际的使用中,还存在一种场景就是需要在某一个逻辑中触发某一个事件,就像是jQuery中得trigger一样
router.navigate('topic/1000', {  
    trigger: true  
});
  • stop()方法
    还记得我们是通过Backbone.history.start()方法来启动路由监听的,你也可以随时调用Backbone.history.stop()方法来停止监听,例如:
router.route('topic/:pageno/:pagesize', 'page', function(pageno, pagesize) {  
    Backbone.history.stop();  
}); 

运行这段代码,并访问URL:http://localhost/index.html#topic/5/20,你会发现这个Action被执行之后,监听已经不再生效了。

发布了62 篇原创文章 · 获赞 9 · 访问量 3万+

猜你喜欢

转载自blog.csdn.net/qq_37026254/article/details/102606289