带有 Backbone 的 jQuery Mobile 中的后退按钮无法正常工作答案

【问题标题】：Back buttons in jQuery Mobile with Backbone do not work properly带有 Backbone 的 jQuery Mobile 中的后退按钮无法正常工作
【发布时间】：2013-08-16 02:19:39
【问题描述】：

我正在使用 jQueryMobile 和 Backbone，并且在自定义或动态生成的后退按钮无法正确返回历史记录时遇到问题。我在锚标签上使用data-rel="back" 属性，如文档中所述：http://view.jquerymobile.com/1.3.2/dist/demos/widgets/headers/

我的后退按钮代码如下：

<a href="#" data-rel="back" data-icon="arrow-l" data-iconpos="notext"></a>

当我单击后退按钮时，它似乎根本没有使用data-rel="back" 功能，而是转到href 属性中指定的页面，在大多数情况下为“#”或为空。

这可以通过硬编码不同的href 值来确认 - 后退按钮将转到该页面，而不是历史记录中的前一页。

我怀疑这是 Backbone 和 jQuery Mobile 之间的冲突以及使它们正常工作所需的配置（让 Backbone 处理页面转换），但不知道如何解决它。

如 jQM 文档中所述，我必须在 mobile-config 文件中设置以下内容：

$.mobile.ajaxEnabled            = false;
$.mobile.linkBindingEnabled     = false;
$.mobile.hashListeningEnabled   = false;
$.mobile.pushStateEnabled       = false;
$.mobile.changePage.defaults.changeHash = false;

注意：在发布之前，我已经在 SO 上查看了许多关于此主题的帖子，但似乎没有任何回复中提供合适的解决方案。

【问题讨论】：

标签： jquery-mobile backbone.js

【解决方案1】：

我想通了。这是实施此处找到的解决方案的组合： jQuery Mobile + backbone.js: page transition when going back

与

在我想要绑定自定义事件的所有锚标记中添加一个属性“数据绕过”，因为我正在使用 Backbone Boilerplate 项目中的一段代码来处理相对 URL。

【讨论】：

您应该accept your answer，这样当未来的访问者看到您的问题时，他们可以看到有一个可接受的解决方案。

【解决方案2】：

我遇到了同样的情况，发现一个简单的解决方案就是创建一条新路线并用它来回到历史。

例如，只需将后退按钮的 href 值设置为 #back：

<a href="#back" data-icon="back" data-rel="back" title="Go back">Back</a>

然后添加一条新路线

routes: {
    ...   
    'back' : 'back',
    ...
}

而在处理路线的代码中，只需回到历史上两步。

appRouter.on('route:back', function() {
    history.go(-2);
});

需要返回 -2 以取消 #back 路由。

【讨论】：