CODEWITHSUNDEEP
jquery-mobilebackbone.js
Maxime Laval
Maxime Laval

Reputation: 4378

jQuery Mobile + backbone.js: page transition when going back

In the initialize function of my backbone router I have

$(document).on('click', '.back', function(e) {
    e.preventDefault();
    window.history.back();
});

and I define my back buttons like

<a data-rel="back" class="back">Back</a>

The thing is I would like to change the transition and the direction (reverse = true) when I go back, currently it uses the default one.

By the way backbone is in charge of creating pages and routing, I use JQ Mobile only for the UI (you can see how I change pages there: jQuery Mobile + backbone.js: navbar issue).

Thanks.

Upvotes: 3

Views: 3150

Answers (2)

ado
ado

Reputation: 105

Along those same lines :)

var defs = $.mobile.changePage.defaults;
$('a[data-role="button"]').live('click', function(event) {
  var $this = $(this);

  if($this.attr('data-transition')) {
    $.mobile.changePage.defaults.transition = $this.attr('data-transition');
  } else {
    $.mobile.changePage.defaults.transition = defs.transition;
  }

  if($this.attr('data-direction')) {
    $.mobile.changePage.defaults.reverse = $this.attr('data-direction') == 'reverse';
  } else {
    $.mobile.changePage.defaults.reverse = false;
  }

  if($this.attr('data-rel') === 'back') {
    window.history.back();
    return false;
  }
});

Upvotes: 0

Maxime Laval
Maxime Laval

Reputation: 4378

I ended up doing:

var self = this;
$(document).on('click', '.back', function(e) {
    e.preventDefault();
    self.back = true;
    window.history.back();
});

Then

$.mobile.changePage($(pView.el), {changeHash: false, transition: this.back ? 'slide' : transition, reverse: this.back});
this.back = false;

Upvotes: 7

Related Questions