骨干路由器不适用于 pushState答案

【问题标题】：Backbone Router not working with pushState骨干路由器不适用于 pushState
【发布时间】：2012-06-06 06:27:49
【问题描述】：

我想让每个页面请求都重定向到我的index.html，并且在我的应用程序中单击的任何链接（不是#urls - /real/urls） 都可以通过router.js 运行，所以有基本上没有页面刷新 - 纯粹的ajax。有没有一种简单的方法可以使用 Backbone 路由和 htaccess 来做到这一点？

如果我删除{pushState: true} 并将我的链接格式化为#login，我现在可以正常工作。但是，当我启用pushState 并单击#login 时，什么也没有发生。相反，只有在我刷新页面后，Backbone 才会解释 #login 并按照路由呈现 loginView。

这是我的路由器：

// Filename: router.js
define( [ 'views/beta/requestInvite', 'views/beta/login' ],
function(requestInviteView, loginView) {
    var AppRouter = Backbone.Router.extend( {
        routes : {
            // Pages
            'login' : 'login',

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

        // Pages
        login : function() {
            loginView.render();
        },

        defaultAction : function(actions) {
            requestInviteView.render();
        }
    });

    var initialize = function() {
        var app_router = new AppRouter;
        Backbone.history.start({pushState: true});
    };
    return {
        initialize : initialize
    };
});

我希望在requestInviteView 中发生的事情，当点击/login 的链接时，url 变为/login 并呈现loginView。

感谢您的帮助！

【问题讨论】：

标签： .htaccess backbone.js requirejs router pushstate

【解决方案1】：

从 hash 更改为 pushstate 并不是像人们想象的那样更改单个参数那么简单。我所做的是在我的视图中捕获点击事件并调用 app.navigate 来触发路由。

app.navigate("/login", {trigger: true});

http://backbonejs.org/#Router-navigate

【讨论】：

您可以使用类似于this gist 的方法自动执行此操作。

【解决方案2】：

虽然 Anthony 的回答会奏效，但使用 trigger: true 通常并不是最好的做法。相反，您的应用应该结构化，以便您可以调用navigate，并将默认的trigger 值留给false。

Derick Bailey 在他的博客http://lostechies.com/derickbailey/2011/08/28/dont-execute-a-backbone-js-route-handler-from-your-code/ 上谈到了这个问题（段落“关于 Router.Navigate 的第二个参数的“AHA！”时刻”）

此外，更详细地解释路由的整章（包括为什么你应该离开trigger 到false）可以在此pdf书籍样本中免费下载：http://samples.leanpub.com/marionette-gentle-introduction-sample.pdf（完全披露：我是书作者）

【讨论】：

很有趣，但是为了避免第二个参数而复制每个控制器的逻辑似乎是多余的。我在极少数情况下使用它（即，当请求无序路由时，我会即时更改它并呈现正确的视图）。这个问题的上下文是在点击链接后触发一个动作，我认为触发它是最好的做法。