1

我在这里遵循了这个非常好的教程

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 样式）的主要原因之一是页面转换（即弹出或翻转），但是当我将它们添加到所附示例的索引页面时，它们什么也没做（我猜这是因为某些东西被禁用了）。

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

谢谢

4

3 回答 3

2

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

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

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

无需 hack 或其他路由器的 Backbone.js 和 jQueryMobile 路由

jquery-mobile 骨干网.js 路由

于 2012-11-14T02:59:51.573 回答
1

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

在 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;
  });

});
于 2013-11-05T20:43:10.363 回答
0

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

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

步骤 2）在您不希望 jquery mobile 打扰的超链接中使用 data-ajax=false 。因此，通过使用它，我们可以在应用程序中使用 Backbone.js 路由器以及 jQuery mobile 的页面转换效果。

例子

编辑页面

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

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

于 2014-04-23T04:30:57.290 回答