The way to fix this is described in this tutorial:
http://andidog.de/blog/2012/06/using-jquery-mobile-with-backbone-how-to-solve-routing-conflicts-and-use-mvc-for-the-application/
In router.js, change this line:
$.mobile.changePage($(view.el), {changeHash:false});
to this:
$.mobile.changePage($(view.el), {transition: 'slide', changeHash:false});
Or in jqm-config.js you can just add a default page transition like this:
$.mobile.defaultPageTransition = "slide";
Now, this will always use the forward slide (right to left) transition. If you want it to slide the opposite way when going back, you can do something like this. This is what's working for me. This SO answer helped me figure it out: https://stackoverflow.com/a/11660991/1665818. In router.js add these variables:
previousFragments: [],
backDetected: false,
And change the changePage function:
changePage:function (view) {
//add the attribute 'data-role="page" ' for each view's div
view.$el.attr('data-role', 'page');
var currentFragment = Backbone.history.getFragment();
this.backDetected = false;
if(!window.linkClicked && currentFragment == this.previousFragments[this.previousFragments.length-2]) {
this.backDetected = true;
this.previousFragments.pop();
} else {
this.previousFragments.push(currentFragment);
}
//reset
window.linkClicked = false;
console.log("this.backDetected= "+this.backDetected);
//append to dom
$('body').append(view.$el);
if(!this.init){
$.mobile.changePage($(view.el), {reverse: this.backDetected, changeHash:false});
}else{
this.init = false;
}
}
Then in main.js add a window.linkClicked variable at the top:
window.linkClicked = false;
And add an event listener inside the document ready function:
$(document).ready(function() {
console.log("DOM IS READY");// Handler for .ready() called.
$(document).on('click', 'a', function() {
window.linkClicked = true;
});
});
