Backbone Router + RewriteRule不用“/”触发路由

时间:2012-06-08 02:39:45

标签: javascript .htaccess backbone.js router

我将所有链接从example.com/action转换为example.com/index.html#action,然后由我的Backbone路由器解析。

但是,我的新页面signup/:inviteAuthHash(例如signup/9d519a2005b3dac8802d8e9e416239a1)无效;渲染的唯一东西是我的index.html,我的路由器中没有任何断点得到满足。

htaccess的:

# not a file or directory
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
# example.com/home => example.com/index.html#home
RewriteRule ^(.+)$ index.html#$1 [L,QSA]

router.js

var AppRouter = Backbone.Router.extend( {
    routes : {
        /* PAGES */
        // beta
        'request_invite' : 'request_invite',
        'signup/:inviteAuthHash' : 'signup',

        // Default
        '*actions' : 'defaultAction'
    },

    /* PAGES */
    // eta
    request_invite : function() {
        new BetaLayout;
        new RequestInviteView;
    },
    signup : function(inviteAuthHash) {
        // validate auth hash
        if(!InviteRequest.isValidInviteAuthHash(inviteAuthHash))
            return this.defaultAction();
        else {
            new BetaLayout;
            new SignupView(SignupView);
        }
    },

    // Default
    defaultAction : function(actions) {
        app_router.navigate('request_invite');
        this.request_invite();
    }
});

var initialize = function() {
    app_router = new AppRouter;

    $('a').live('click', function() {
        var href = $(this).attr('href');

        // only navigate to real links
        if(href == undefined)
            return;

        // open in new window?
        if($(this).prop('target') == '_blank')
            return true;

        app_router.navigate(href, {trigger: true});

        return false;
    });

    Backbone.history.start({pushState: true});
};
return {
    initialize : initialize
};

2 个答案:

答案 0 :(得分:2)

你可以尝试这个.htaccess:

# not a file or directory
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteCond %{REQUEST_FILENAME} !-l
# example.com/home => example.com/index.html#home
RewriteRule (?!^index\.html)^(.+)$ /index.html#$1 [L,NC,R,NE]

答案 1 :(得分:0)

我认为在我看来还有另一个更好的解决方案:使用pushState。

所以你做的是

  1. 更改您的服务器配置,以便example.com下的所有网址(除了您的资产)实际呈现index.html(我的apache知识生锈,但这应该不难)。
  2. 将您的调用更改为Backbone.history.start以启用pushstate,并指定根Backbone.history.start({pushState: true, root: "/"}),请参阅Backbone documentation
  3. 在支持pushstate的浏览器上,url将按原样显示并且一切正常,在较旧的浏览器上,主干网会自动将其转换为带有哈希的url。