我的路由器没有使用后退/前进点击

时间:2012-09-15 01:55:12

标签: backbone.js

我的路由器看起来像这样:

define(function(require) {
var _         = require('underscore'),
    Backbone  = require('backbone'),

    homeStageView,
    homeSidebarView,
    yxyStageView;



return Backbone.Router.extend({
    routes: {
        '/web/:route'     : 'viewLoader'
    },

    initialize: function() {
        //this._bindRoutes();
        $('.link').click(function(e) {
            e.preventDefault();
            Backbone.history.navigate($(this).attr('href'), true);
        });
    },

    viewLoader: function(route) {
        switch(route) {
            case 'home': 
                this.homeHandler();
                break;
            case 'yxy':
                this.yxyHandler();
                break;
        }
    },

    // navigation handlers
    homeHandler: function() {
        if ( !homeStageView ) {
            require(['views/home-stage-view'], function(HomeStageView) {
                homeStageView = new HomeStageView();
                homeStageView.render();
            });    
        }
        else {
            homeStageView.render();
        }
        this.renderHomeSidebarView();
    },

    yxyHandler: function() {
        if ( !yxyStageView ) {
            require(['views/yxy-stage-view'], function(YxyStageView) {
                yxyStageView = new YxyStageView();
                yxyStageView.render();
            });    
        }
        else {
            yxyStageView.render();
        }
        this.renderHomeSidebarView();
    },

});

});

在我的主视图中,我按照这样启动路由器:

appRouter = new AppRouter();    
if ( history && history.pushState ) {
    Backbone.history.start({pushState: true});
    console.log('has pushState');
}
else {
    Backbone.history.start();
    console.log('no pushState');
}

这适用于加载我的所有视图,但是当用户点击后退按钮时它不起作用。

地址栏中的网址可能会相应,但就是这样。显然,我错过了一些东西。

有人可以帮忙吗?

1 个答案:

答案 0 :(得分:4)

来自fine manual

  

延伸 Backbone.Router.extend(properties, [classProperties])

     

[...]请注意,您要避免在路径定义中使用前导斜杠:

您的路线为/web/:route,请尝试删除前导斜杠:

routes: {
    'web/:route': 'viewLoader'
}