Skip to content


Subversion checkout URL

You can clone with
Download ZIP


Be able to use 'reverse' direction, even if you disable back-button handlers (for example when using jqm with backbone.js) #4902

wants to merge 1 commit into from

3 participants



  • jQuery Mobile + backbone.js App.
  • jQuery Mobile bindings/history/routing were disabled to use Backbone's.
  • Back buttons are being used manually (that means using window.history.back directly)


  • 1.1.1 won't apply the reverse direction even if you set the link with data-direction="reverse" to the links.


For example having:
(based on )

  # Disable jQuery Mobile routing and history to use Backbone.
  $.mobile.ajaxEnabled = false
  $.mobile.linkBindingEnabled = false
  $.mobile.hashListeningEnabled = false
  $.mobile.pushStateEnabled = false

  # Enable back buttons by default
  $ = true

This will add the back button, but since all the handlers are disabled, you need to redirect to the last page manually:

($('a[data-rel="back"]')).live('click', function() {

That will work. But sadly you won't see the default reverse direction for any back button. But it will be fixed by setting the $.mobile.forceReverse = true. So letting the application to use forward direction by default, and reverse for all the back buttons.

($('a[data-rel="back"]')).live('click', function() {
  $.mobile.forceReverse = true;

That change won't affect any other place than the Back buttons. And the variable is false by default.
I've included the Documentation changes too.

@mariozaizar mariozaizar Include `$.mobile.forceReverse` to be able to set the 'reverse' direc…
…tion, even when the link binding was disabled. Useful when you're using backbone & jquery mobile, so:

$.mobile.forceReverse = true;

($('a[data-rel="back"]')).live('click', function() {
  $.mobile.forceReverse = true;

this is very old and there are conflicts will be happy to reopen and review if it is updated

@arschmitz arschmitz closed this
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Commits on Aug 28, 2012
  1. @mariozaizar

    Include `$.mobile.forceReverse` to be able to set the 'reverse' direc…

    mariozaizar committed
    …tion, even when the link binding was disabled. Useful when you're using backbone & jquery mobile, so:
    $.mobile.forceReverse = true;
    ($('a[data-rel="back"]')).live('click', function() {
      $.mobile.forceReverse = true;
This page is out of date. Refresh to see the latest.
13 docs/pages/page-transitions.html
@@ -111,6 +111,19 @@
<h2>Setting a transition on a link or form submit</h2>
<p>By default, the framework applies a <strong>fade</strong> transition. To set a custom transition effect, add the <code>data-transition</code> attribute to the link. </p>
+ <p>
+ Note that reverse direction won't be applied if you disable the link binding with <code>$.mobile.linkBindingEnabled = false;</code>.
+ If you want to force a reverse direction, please define: <code>$.mobile.forceReverse = true;</code>. For example:
+$.mobile.forceReverse = true;
+($('a[data-rel="back"]')).live('click', function() {
+ $.mobile.forceReverse = true;
+ window.history.back();
+ </p>
&lt;a href=&quot;index.html&quot; <strong>data-transition=&quot;pop&quot;</strong>&gt;I'll pop&lt;/a&gt;
12 js/
@@ -64,9 +64,19 @@ define( [ "jquery", "text!../version.txt" ], function( $, __version__ ) {
// For error messages, which theme does the box uses?
pageLoadErrorMessageTheme: "e",
- //automatically initialize the DOM when it's ready
+ // Automatically initialize the DOM when it's ready
autoInitializePage: true,
+ // Force reverse direction, for example when:
+ // $.mobile.linkBindingEnabled = false;
+ // So, you can:
+ // ($('a[data-rel="back"]')).live('click', function() {
+ // $.mobile.forceReverse = true;
+ // window.history.back();
+ // });
+ forceReverse: false,
pushStateEnabled: true,
// allows users to opt in to ignoring content by marking a parent element as
3  js/
@@ -1150,7 +1150,8 @@ define( [
$.mobile.activePage = toPage;
// If we're navigating back in the URL history, set reverse accordingly.
- settings.reverse = settings.reverse || historyDir < 0;
+ settings.reverse = settings.reverse || $.mobile.forceReverse || historyDir < 0;
+ $.mobile.forceReverse = false;
transitionPages( toPage, fromPage, settings.transition, settings.reverse )
.done(function( name, reverse, $to, $from, alreadyFocused ) {
Something went wrong with that request. Please try again.