Question

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

我已经加入了jQuery Mobile。我也有jQuery标准。

jQuery没问题，但是当我加入jQuery Mobile时，奇怪的事情发生了。

从网址中删除了＃符号，我的h1标记被替换为文本“loading”。

如何让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）打开网站后，会出现一个空白页面。这是错的

当您尝试打开其他页面路径时：

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

您被重定向到：

http://quizz.pl/otherpage

b）这也是错误的，因为你不应该被重定向

c）页面也是空的，所以它也是错误的

任何人都可以提供帮助吗？

Answer 1

根据您的目标受众，您可以执行以下操作：

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

Answer 2

$(document).bind("mobileinit", function () {
$.mobile.ajaxEnabled = false;
$.mobile.linkBindingEnabled = false;
$.mobile.hashListeningEnabled = false;
$.mobile.pushStateEnabled = false;
$.mobile.changePage.defaults.changeHash = false;

}）;

如何让jQuery Mobile停止破坏Ember.js网站？

2 个答案: