1 Backbone Router

发布于 2022年 04月 30日 09:54

Router和History (路由控制)

Backbone.Router担任了一部分Controller(控制器)的工作,它一般运行在单页应用中,能将特定的URL或锚点规则绑定到一个指定的方法(后文中称Action)。

当我们开发一个单页应用时,常常会遇到这样两个问题:

我们在同一个页面中通过用户的操作来隐藏、显示HTML块,为用户提供一个无刷新、完整流畅的体验,但用户可能并不知道他当前正处于同一个页面中,因此他希望通过浏览器的“前进”和“后退”按钮来返回和前进到上一步操作。当他真正这样操作时,会离开当前页面,这显然不是用户所期望的。

另一个问题是用户在单页应用中操作,当他读到一篇好的文章,或看到一个中意的商品时,他可能会将URL收藏起来或分享给自己的好友。但当他下一次重新打开这个链接地址,看到的却是应用的初始化状态,而并不是当初那篇文章或那个商品。

Backbone.Router为我们提供了解决这两个问题的方法,我们先来看一个例子:

Js代码 收藏代码

    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

然后再使用浏览器的“前进”、“返回”等按钮进行切换,你会看到当你的URL切换时,控制台输出了对应的结果,说明它已经调用了相应的方法。而在进行这些操时,页面并没有刷新。这个例子很好地解决了我们在一开始所说的两个问题。

推荐文章