骨干路由器获取后退按钮的历史长度

Posted 2023-02-25

【中文标题】骨干路由器获取后退按钮的历史长度

【英文标题】：Backbone router getting history length for back-button

【发布时间】：2013-01-14 10:10:41

【问题描述】：

我在 PhoneGap 应用程序中使用 Backbone。像每个移动应用程序一样，我需要一个后退按钮功能。它基本上可以与 Backbone 完美配合，因为我可以简单地使用 window.history.back()，它就可以正常工作。

我唯一的问题是决定何时显示后退按钮。使用window.history.length是不行的，因为使用back()时并没有递减（当然，因为你也可以去forward()）。

有什么方法可以检测是否有更多历史记录或者我是否已经在堆栈的底部？由于浏览器似乎没有提供此信息 (How to check if the user can go back in browser history or not)，Backbone 是否会跟踪此信息？

【参考方案1】：

你可以很容易地实现这样的东西

Backbone.history.length = 0;
Backbone.history.on('route', function ()  ++this.length; );
myRouter.back = function () 
  Backbone.history.length -= 2;
  window.history.back();
;

只需使用myRouter.back() 即可返回。

【讨论】：

我也是这样做的，只要你能控制后退导航就可以了。不过，如果用户可以使用浏览器的本机后退按钮或手机硬件按钮向后导航，我将无法工作。

@casey-foster 一个问题：当你使用replace:true, trigger: true 时，你就完蛋了

我使用这个解决方案来确定路由是否是全新的浏览器会话/选项卡。 if (length) /*现有的浏览器标签会话*/ else /* 全新的浏览器标签会话 */

【参考方案2】：

Casey Foster 的答案乍一看还不错，但有一个缺陷：当使用 router.navigate 与 trigger 和 replace 都设置为 true 时，你最终会得到一个错误的计数器。

我想出了一个更简单的解决方案：基本上只有一条路线我不需要后退按钮，那就是index 路线。因此我的代码现在看起来像

Backbone.history.on('route', _.bind(function(router, route) 
    if(route === 'index') 
        this.$el.removeClass('has-back-button');
     else 
        this.$el.addClass('has-back-button');
    
, this));

【讨论】：

index -> another page -> index，你不能通过window.history.back()回到another page 对吧？

您只能使用返回按钮访问index。索引包含一个列表。您打开一个项目（可能还有子项目）并使用后退按钮返回列表。所以它非常适合我的用例。

嘿，如果它满足您的用例，那就是您所需要的。提示，如果您使用的是 BB >= 0.9.9，您可以编写 this.listenTo(Backbone.history, 'route', function (__, route) ... ); 而无需 _.bind 函数。这也使使用this.stopListening() 的事件清理变得容易（并且在View#remove 中是自动的）。

@CaseyFoster 谢谢，我差点忘了listenTo（遇到过一次）。

【参考方案3】：

以@CaseyFoster's answer 为基础，您可以自己跟踪历史记录。除了您自己的后退按钮之外，您还需要抓住设备的硬件后退按钮按下。

PhoneGap 为此提供了backbutton 事件：

document.addEventListener("backbutton", function() 
  Backbone.history.length -=2;
, false);

请注意 Backbone.history.length 是在 Casey Foster 的回答中定义的，它不是 Backbone 本身的一部分。