How to make jQuery Mobile stop breaking Ember.js site?

问题

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?

回答1:

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

回答2:

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

});

来源：https://stackoverflow.com/questions/19617480/how-to-make-jquery-mobile-stop-breaking-ember-js-site

标签

jquery

jquery-mobile

ember.js