主干路由 - 检测浏览器后退按钮按下答案

【问题标题】：backbone routes – detecting browser back button press主干路由 - 检测浏览器后退按钮按下
【发布时间】：2012-05-01 09:45:04
【问题描述】：

我正在尝试寻找一种方法来检测用户何时在浏览器中按下了后退/前进按钮。

我正在使用主干来处理路由，并使用主干来呈现我的视图。

问题是我无法从任何地方挂钩此页面更改事件。

我尝试在我的视图的初始化函数中添加一个日志......但是当我使用后退按钮时它没有被触发。

我真的不确定如何检测此页面更改。

【问题讨论】：

标签： javascript backbone.js

【解决方案1】：

当按下返回按钮时，会触发 popstate 事件。

我正在使用这段代码：

// listening for the browser's back button
window.addEventListener('popstate', function(e) {
    router.navigate(Backbone.history.getFragment(), { trigger: true, replace: true });
});

【讨论】：

【解决方案2】：

您可以将回调绑定到 Backbone route 事件：

    Backbone.history.on('route', function () {
        // Do your stuff here
    });

您可以使用Backbone.history.getFragment() 了解您是否站立。

【讨论】：

sn-p 末尾缺少右括号）

【解决方案3】：

您应该使用Backbone.Router 并确保在启动应用程序时不要忘记Backbone.history.start()。

一些有用的信息可以在here和here找到

其实第二个链接不是文章，而是博客。而且写这篇文章的人似乎真的很了解这个话题。

UPD：这个想法是当你的 url 改变时，主干的路由器会触发绑定方法。所以你应该把你的逻辑放在这个方法上，这样你就可以跟踪它。也许这不是很自动的方式，需要编写一些代码，但我认为它应该可以工作。

【讨论】：

是的，我读过。这个想法是，当您的 url 更改时，主干的路由器会触发绑定方法。所以你应该把你的逻辑放在这个方法上，这样你就可以跟踪它。也许这不是很自动的方式，需要编写一些代码，但我认为它应该可以工作。
@Ph0en1x 您是正确的，使用 Backbone 的 History 对象可以提供解决方案，因为它监视在站点内导航时按下后退按钮时触发的“popstate”事件。但是，您的回答并不清楚这就是您所说的，也不清楚 OP 将如何使用 Backbone.History 解决他的问题。
有趣的是，这个答案有很多缺点。然而，即使在 2015 年底，答案本身也故意正确。但看起来人们不想仔细阅读，也不想思考。他们只想复制粘贴 sn-p。
@Ph0en1x：我认为问题在于如何捕获实际的“后退/前进”事件，而不仅仅是在 URL 更改时。例如，如果我在一个视图/app，那么我去查看app/about。如果我调用该方法：router.navigate('/app', {trigger: true, replace: true})，您将如何从app 视图中判断用户是否单击了“返回”按钮？从我的角度来看，我会区别对待这两种情况。
“一些有用的信息可以在这里和这里找到” - 不幸的是，截至今天，这两个链接都已失效@Ph0en1x

【解决方案4】：

显然，即使 GitHub 也不知道如何检测按下了哪个按钮；）他们使用以下代码：

slideTo: function (a) {
      var b = this.pathFromURL(a),
         c = this.frameForPath(b),
         d = $("#slider .frame-center").attr("data-path") || "";
      c.is(".frame-center") || (d == "/" || b.split("/").length > d.split("/").length ?
        this.slideForwardTo(a) : this.slideBackTo(a))
}

【讨论】：

【解决方案5】：

您可以扩展Backbone.Router 并重载route 和open 方法。您可以在这两种方法中处理所有页面更改。所以只需从主干文件中重新复制它们，然后使用它。

【讨论】：