2

我有一个用 Ember.js 编写的网站。导航基于带有# 符号的网址。

我已经包含了 jQuery Mobile。我也有 jQuery 标准。

jQuery 没问题,但是当我包含 jQuery Mobile 时发生了奇怪的事情。

# 符号从 URL 中删除,我的 h1 标记替换为文本“正在加载”。

如何让 jQuery Mobile 与 Ember.js 网站配合得很好?

更新:

我创建了一个演示,显示了所描述的问题。

单独的 Ember.js

这里:

http://quizz.pl/ffs/without-jquerymobile

您有一个使用 Ember.js 1.1.2 的演示页面。当您单击“打开其他页面”时,您将被重定向到:

http://quizz.pl/ffs/without-jquerymobile/#/otherpage

您会看到消息“这是另一页”。这没关系。/otherpage 是页面的正确路由,消息取自该路由的模板。

Ember.js + jQuery Mobile

和这里:

http://quizz.pl/ffs/with-jquerymobile/

唯一改变的是我添加了 jquery.mobile-1.3.2.min.js。

a) 打开网站后有一个空白页面。这是错的

此外,当您尝试打开 otherpage 路由时:

http://quizz.pl/ffs/without-jquerymobile/#/otherpage

您被重定向到:

http://quizz.pl/otherpage

b)这也是错误的,因为您不应该被重定向

c)页面也是空的,所以它也是错误的

任何人都可以帮忙吗?

4

2 回答 2

3

根据您的目标受众,您可以做一些事情:

1.)如果他们使用支持历史的现代浏览器http://caniuse.com/history那么你可以改变 ember 的路由机制以不使用哈希,这样它就不会再与 jquery mobile 发生冲突,如下所示:

 App.Router.reopen({
    location: 'history'
 });

2.) 您可以破解 jquery mobile 并禁用其内部页面导航。所以,我不使用 Jquery mobile,所以如果我破坏了您想要使用的部分代码,请避免对我大喊大叫,但这基本上是有效的。所以我们解绑了他们代码的导航部分,并劫持了他们的页面更​​改事件。此外,我将 ember 应用程序注入到 jquery 移动框中并隐藏了加载 div。

http://emberjs.jsbin.com/Ubatiri/2/edit

App = Ember.Application.create({
  rootElement: '.ui-page',

  ready: function(){
    //
    $.mobile.window.unbind({ 
      "popstate.history": $.proxy( this.popstate, this ),
  "hashchange.history": $.proxy( this.hashchange, this )
});

    $.mobile.changePage = function(){console.log('die jquery mobile navigation');};

    $('.ui-loader').hide();
  }
});

根据操作,这些步骤也有助于禁用

$(document).bind("mobileinit", function () {
  $.mobile.ajaxEnabled = false;
  $.mobile.linkBindingEnabled = false;
  $.mobile.hashListeningEnabled = false;
  $.mobile.pushStateEnabled = false;
  $.mobile.changePage.defaults.changeHash = false;
});
于 2013-10-27T15:39:31.623 回答
1
$(document).bind("mobileinit", function () {
$.mobile.ajaxEnabled = false;
$.mobile.linkBindingEnabled = false;
$.mobile.hashListeningEnabled = false;
$.mobile.pushStateEnabled = false;
$.mobile.changePage.defaults.changeHash = false;

});

于 2013-10-28T17:24:23.340 回答