Mobile's back button not working - backbone.js 0.5.3 with jquerymobile 1.0 RC2

Question

When using the navigate method with triggerRoute = true; the page navigates fine to the new page but history is not updated.

When hitting the back button on an Android device (Nexus S), the history pops, but the navigation does not happen.

If I pass false for the triggerRoute and then call Backbone.history.loadUrl(); Then the back button does work but sort of erratically.

The navigate method has this comment ....

// URL-encoding the fragment in advance. This does not trigger
// a `hashchange` event.

After reading several posts, it seems to me that using the navigate method is the right way and should update the history...

Code snippet ...

er.getApp().getController().navigate('home', true);

OR

er.getApp().getController().navigate('home');
Backbone.history.loadUrl();

Is there a known routing issue with jquerymobile and backbone combination. Older answers here relate to earlier version of backbone.js and are not valid anymore ...

Answer 1

Ok. Found a resolution. Basically tell jquerymobile not to do anything with the back button and hashchange event and let backbone handle it completely.

In the index.html, appLoading event handler, there was code binding Jquerymobile to the back button, removed it.

//removed this part
document.addEventListener("backbutton", function(){
              if (window.history.length > 0) {
                  window.history.back();
                  return false;
              }
              navigator.app.exitApp();
}, true);

// Since we are using the backbone router we want to disable
// auto link routing of jquery mobile.
// The code below for mobileinit
// notice the last two settings
   $(document).bind("mobileinit", function() {
  $.mobile.ajaxEnabled = false;
  $.mobile.hashListeningEnabled = false;
  $.mobile.pushStateEnabled = false;
  $.mobile.changePage.defaults.changeHash = false;
});