如何让 jQuery Mobile 停止破坏 Ember.js 站点? [英] How to make jQuery Mobile stop breaking Ember.js site?

问题描述

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

I have a website written with Ember.js. Navigation is based on urls with # sign.

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

I've included jQuery Mobile. I have also jQuery standard.

jQuery 还可以，但是当我包含 jQuery Mobile 时，奇怪的事情发生了.

jQuery was ok, but when i included jQuery Mobile strange things happen.

# 号从 URL 中删除，我的 h1 标签被替换为文本正在加载".

The # sign is removed from URLs and my h1 tag is replaced with text "loading".

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

How to make jQuery Mobile act nicely with Ember.js site?

更新:

我已经创建了一个演示来展示所描述的问题.

I've created a demo showing the issue described.

仅 Ember.js

这里:

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

您有一个使用 Ember.js 1.1.2 的演示页面.当您点击打开其他页面"时，您将被重定向到:

You have a demo page using Ember.js 1.1.2. When you click 'Open other page' you are redirected to:

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

然后您会看到消息这是其他页面".这没关系./otherpage 是页面的正确路由，消息取自该路由的模板.

And you see message 'This is other page'. And this is ok. /otherpage is correct route for the page and message is taken from the template of this route.

Ember.js + jQuery Mobile

这里:

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

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

the only thing that changes is that i've added jquery.mobile-1.3.2.min.js.

a) 打开网站后，有一个空白页面.错了

a) After you open the site there is a empty page. It's wrong

还有当你尝试打开otherpage路由时:

Also when you try to open the otherpage route:

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

您被重定向到:

http://quizz.pl/otherpage

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

b) And this is also wrong, because you shouldn't be redirected

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

c) Page is also empty so it's also wrong

有人可以帮忙吗?

推荐答案

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

Depending on your target audience you could do a few things:

1.) 如果他们使用支持历史记录的现代浏览器 http://caniuse.com/history 那么您可以将 ember 的路由机制更改为不使用哈希，以便它不再与 jquery mobile 发生冲突，如下所示:

1.) If they are using modern browsers that support history http://caniuse.com/history then you can change ember's routing mechanism to not use the hash so that it isn't clashing with jquery mobile anymore like so:

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

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

2.) You can hack jquery mobile and disable their internal page navigation. So, I don't use Jquery mobile, so avoid yelling at me if I'm breaking some portion of their code that you wanted to use, but this essentially works. So we unbind the navigation portion of their code, and hijack their page change event. Additionally I injected the ember app into the jquery mobile box and hid the loading 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();
  }
});

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

Per the op, these steps were helpful as well for disabling

$(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 站点?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！