Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Preventing full page reload on Backbone pushState

Tags:

backbone.js

I'm trying to prevent full page reloads using Backbone's pushState. When I call navigate() from my view's event, I see the messages marked // 1 below, but not // 2. In addition, when I try to open the same tab, the page reloads again.

Must I stop the event myself? I tried using jQuery's preventDefault(), which does prevent the page reload, but I haven't seen this documented anywhere.

Below is my current code:

App.Router = Backbone.Router.extend({
  routes:{
      "analytics":"analytics"
    , "realtime":"realtime"
  }

  , analytics:function(page) {
    console.log("analytics route hit: %o", page); // 2
  }

  , realtime:function(page) {
    console.log("realtime route hit: %o", page); // 2
  }
});

App.TabSetView = Backbone.View.extend({
  initialize:function() {
    this.collection.bind("reset", this.render, this);
    this.collection.bind("add", this.render, this);
    this.collection.bind("change", this.render, this);
    this.collection.bind("remove", this.render, this);
  }

  , events:{
      'click li.realtime a':  "onRealtime"
    , 'click li.analytics a': "onAnalytics"
  }

  , render:function() {
    // omitted for brevity
  }

  , onAnalytics:function() {
    console.log("onAnalytics"); // 1
    if (this.collection.activateAnalytics()) {
      App.app.navigate("analytics", true);
      this.render();
      console.log("navigated");
    } else {
      console.log("do nothing"); // 1
    }
  }

  , onRealtime:function() {
    console.log("onRealtime");
    if (this.collection.activateRealtime()) {
      App.app.navigate("realtime", true);
      this.render();
      console.log("navigated");
    } else {
      console.log("do nothing"); // 1
    }
  }
});

var tabs = ...; // omitted for brevity
var tabSetView = new App.TabSetView({collection: tabs});
var App.app = new App.Router;
Backbone.history.start({pushState:true});
like image 315
François Beausoleil Avatar asked Oct 03 '11 20:10

François Beausoleil


3 Answers

to stop the page reload when a user clicks a link, you have to call e.preventDefault() like you were suggesting.


MyView = Backbone.View.extend({
  events: {
    "click .some a": "clicked"
  },

  clicked: function(e){
    e.preventDefault();
    // do your stuff here
  }
});

you're also right that this isn't documented in the backbone docs. events are handled by jQuery, though. so you can assume that any valid jQuery things you would do - such as have an e parameter to an event callback - will work with backbone's events.

as for this:

in addition, when I try to open the same tab, the page reloads again.

are you saying when a user opens a new browser tab to your site's url? if so, then there's nothing you can do about this. when the browser opens the tab it makes the request to the server to load the page.

if you're referring to a "tab" as part of your site's user interface, though, then the use of e.preventDefault() on your link / "tab" clicks should take care of that.

like image 73
Derick Bailey Avatar answered Nov 24 '22 09:11

Derick Bailey


The answer is actually in here https://stackoverflow.com/a/9331734/985383, if you enable pushState you want links to work and not prevent them as suggested above, or well, is not just preventing them. here it is:

initializeRouter: function () {
  Backbone.history.start({ pushState: true });
  $(document).on('click', 'a:not([data-bypass])', function (evt) {

    var href = $(this).attr('href');
    var protocol = this.protocol + '//';

    if (href.slice(protocol.length) !== protocol) {
      evt.preventDefault();
      app.router.navigate(href, true);
    }
  });
}
like image 43
piggyback Avatar answered Nov 24 '22 08:11

piggyback


 $('a').click(function(e){
   e.preventDefault();
   Backbone.history.navigate(e.target.pathname, {trigger: true});
 });
like image 31
mynameistechno Avatar answered Nov 24 '22 08:11

mynameistechno