Question

我已经按照这个非常好的教程

了

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样式）的主要原因之一是页面转换（即弹出或翻转）但是当我将这些添加到附加示例的索引页面时没有做任何事情（我猜这是因为事情已被禁用）。

有没有人知道这方面的方法以及我的诊断是否正确？

由于

Answer 1

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

您可能希望看到的是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

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

});

Answer 3

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

步骤1）默认情况下，$ .mobile.linkBindingEnabled将为true，因此您可以评论代码中是否有任何行，如“$ .mobile.linkBindingEnabled = false;”。

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

实施例

编辑页面

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

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

jQuery-mobile与主干页面转换

3 个答案: