如何使jQuery Mobile停止打破Ember.js网站？ [英] How to make jQuery Mobile stop breaking Ember.js site?

问题描述

我有一个使用Ember.js编写的网站。导航是基于＃符号的URL。

我已经包含了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）打开网站后会出现一个空白页面。这是错误的

此外，当您尝试打开另一页路由：

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

您被重定向到：

http： //quizz.pl/otherpage

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

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

任何人都可以帮助？

解决方案

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

1）如果他们使用支持历史记录的现代浏览器a href =http://caniuse.com/history =nofollow> http://caniuse.com/history ，那么你可以更改ember的路由机制，不要使用哈希，因此它不是'与jquery手机冲突如此：

  App.Router.reope n（{
位置：'history'
}）; 
  

2）你可以劫持jquery手机，并禁用他们的内部页面导航。所以，我不使用Jquery手机，所以如果我打破了你想要使用的代码的一部分，那么避免大喊大叫，但是这基本上是有效的。所以我们取消绑定导航部分的代码，并劫持他们的页面更​​改事件。此外，我将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'）;}; 
 
 $（' -loader'）。hide（）; 
} 
}）; 
  

按照操作，这些步骤对于禁用

$也是有帮助的b $ b

  $（document）.bind（mobileinit，function（）{
 $ .mobile.ajaxEnabled = false; 
 $ .mobile。 linkBindingEnabled = false; 
 $ .mobile.hashListeningEnabled = false; 
 $ .mobile.pushStateEnabled = false; 
 $ .mobile.changePage.defaults.changeHash = false; 
}） ; 
  

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

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

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

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

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

Update:

I've created a demo showing the issue described.

Ember.js alone

Here:

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

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

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

And here:

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

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

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

Also when you try to open the otherpage route:

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

You are redirected to:

http://quizz.pl/otherpage

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

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

Anyone can help?

解决方案

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

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.) 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屋！