带有主干页面转换的 jQuery-mobile答案

【问题标题】：jQuery-mobile with backbone page transitions带有主干页面转换的 jQuery-mobile
【发布时间】：2012-11-14 02:38:27
【问题描述】：

我在这里学习了这个非常好的教程

http://www.appliness.com/getting-started-with-html-mobile-application-development-using-jquery-mobile-requirejs-and-backbonejs/#codesyntax_9

这是 jQuery Mobile 和 Backbone 的起点。

我了解到，由于主干网和 jQuery-Mobile 都内置了路由服务，因此 jQuery-Mobile 已将其关闭。

我想使用这样一个包（以及 UI 样式）的主要原因之一是页面转换（即弹出或翻转），但是当我将它们添加到所附示例的索引页面时，它们什么也没做（我猜这是因为某些东西被禁用了）。

有谁知道解决这个问题的方法以及我的诊断是否正确？

谢谢

【问题讨论】：

标签： jquery jquery-mobile backbone.js

【解决方案1】：

我不确定您在哪里看到 jQuery-mobile 关闭了“路由”功能，但 jQuery-mobile 和 Backbone.js 确实都可以使用哈希标签，并且两者都使用存在一些问题同时。

您可能想要查看的是专门为此目的制作的jQuery-mobile-router 插件（即使用jQuery-mobile 和backbone.js），此外它还支持jQuery-mobile 页面事件。

您可能还想查看以下与同时使用backbone.js 和jQuery-mobile 相关的SO 帖子。

Backbone.js and jQueryMobile routing without hack or other router

jquery-mobile backbone.js routing

【讨论】：

谢谢杰克，对不起，我的意思是在我附加的示例中，他们禁用了 jQueryMobile ajax 导航系统......我将看看其他 jQuery-mobile-router 插件......猜我想使用骨干路由并且仍然有可用的页面转换
我不确定是否值得 hack 将它们两个一起使用，请记住，backbone.js 的优点之一是您可以使用任何部分它适合你（这不是一个全有或全无的提议），所以你可以使用backbone.js的其余部分，只使用插件进行路由。
@Dan 很高兴为您提供帮助。您可以通过单击左侧的复选标记将 anwser 标记为已接受。
我需要先获得 15 声望
您只需要15 rep 进行投票，accept an anwser 您应该会在箭头下方的答案左侧看到一个复选标记的轮廓。

【解决方案2】：

本教程中描述了解决此问题的方法： http://andidog.de/blog/2012/06/using-jquery-mobile-with-backbone-how-to-solve-routing-conflicts-and-use-mvc-for-the-application/

在 router.js 中，更改这一行：

$.mobile.changePage($(view.el), {changeHash:false});

到这里：

$.mobile.changePage($(view.el), {transition: 'slide', changeHash:false});

或者在 jqm-config.js 中你可以像这样添加一个默认的页面转换：

$.mobile.defaultPageTransition = "slide";

现在，这将始终使用向前滑动（从右到左）过渡。如果您希望它在返回时以相反的方式滑动，您可以执行以下操作。这对我有用。这个 SO 答案帮助我弄清楚了：https://stackoverflow.com/a/11660991/1665818。在 router.js 中添加这些变量：

previousFragments: [],
backDetected: false,

并更改changePage函数：

changePage:function (view) {
    //add the attribute 'data-role="page" ' for each view's div
    view.$el.attr('data-role', 'page');

    var currentFragment = Backbone.history.getFragment();
    this.backDetected = false;

    if(!window.linkClicked && currentFragment == this.previousFragments[this.previousFragments.length-2]) {
        this.backDetected = true;
        this.previousFragments.pop();
    } else {
        this.previousFragments.push(currentFragment);
    }
    //reset
    window.linkClicked = false;
    console.log("this.backDetected= "+this.backDetected);

    //append to dom
    $('body').append(view.$el);

    if(!this.init){
        $.mobile.changePage($(view.el), {reverse: this.backDetected, changeHash:false});
    }else{
        this.init = false;
    }
}

然后在 main.js 顶部添加一个 window.linkClicked 变量：

window.linkClicked = false;

并在文档就绪函数中添加一个事件监听器：

$(document).ready(function() {
  console.log("DOM IS READY");// Handler for .ready() called.

  $(document).on('click', 'a', function() {
    window.linkClicked = true;
  });

});

【讨论】：

【解决方案3】：

我遇到了类似的问题。请在下面找到我的解决方案

第 1 步）默认情况下 $.mobile.linkBindingEnabled 为 true，因此您可以评论代码中是否有类似“$.mobile.linkBindingEnabled = false;”的行。

第 2 步）在您不希望 jquery mobile 打扰的超链接中使用 data-ajax=false。所以通过这个我们可以在应用中使用Backbone.js Routers以及jQuery mobile的页面转换效果。

例子

编辑页面

你会在你的 Backbone.js 路由器中使用这个“#edit”并且不希望 jQuery 干扰，所以这里这个 data-ajax 将满足我们的需要。

我已经使用了上述技术并且成功了。

【讨论】：