Preventing full page reload on Backbone pushState

Question

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});

score 19 · Answer 1 · edited May 23 '17 at 12:34

19

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);
    }
  });
}

edited May 23 '17 at 12:34

Community

1
1

answered Jun 06 '12 at 20:46

piggyback

9,034
13
51
80

href.slice(protocol.length) should be href.slice(0, protocol.length) or href.substr(0, protocol.length) else you're not checking the protocol you're checking everything after it. – JamieL Aug 25 '14 at 14:01
Actually, I think the intention IS to compare everything after the protocol in the href with the protocol, but it's not clear why. Please can someone enlighten me? – mhanney Aug 17 '15 at 17:48
Talking to myself - it's to ensure the link is relative, i.e. does NOT start with the protocol. – mhanney Aug 18 '15 at 18:24

score 19 · Accepted Answer · answered Oct 04 '11 at 04:06

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.

Note this solution will NOT work if the view has no el defined. example: var view = Backbone.View.extend({el: $("#anElement"), etc..}); — SKuijers, Jan 14 '13 at 22:21

score 5 · Answer 3 · answered Feb 27 '14 at 23:43

5

 $('a').click(function(e){
   e.preventDefault();
   Backbone.history.navigate(e.target.pathname, {trigger: true});
 });

answered Feb 27 '14 at 23:43

mynameistechno

3,526
1
37
32

What about external links? – adriendenat Sep 01 '14 at 15:57
Use a data attribute or class on the anchors to exclude external links and update the selector handler accordingly. I'll update the example later. – mynameistechno Sep 02 '14 at 16:47

score 2 · Answer 4 · answered Jul 06 '12 at 18:49

Just a follow up to Derick answer. It worked for me, but to keep it clean, I overwrote the Backbone.View class:

(coffeescript)

class NewBackboneView extends Backbone.View
  events:
    'click a' : 'pushstateClick'

  pushstateClick: (event) ->
    event.preventDefault()

  Backbone.View = NewBackboneView

So every link from my backbone views have the prevent default.

score 0 · Answer 5 · answered Oct 04 '11 at 03:59

It depends on how you've generated the HTML mark-up. It looks like you're using anchor tags (<a>), so if those anchor tag href have values or even an empty string, then you need to cancel the default browser behavior otherwise you'll get a page reload. You can cancel the default behaviour using jQuery're event.preventDefault() like you mentioned. Alternatively, if you're not concerned about progressive enhancement or SEO, then you can set your anchor tag href to # or javascript:void(0);, which will also prevent to the page from reloading. e.g.

<a href="#">Click me</a>

or

<a href="javascript:void(0);">Click me</a>

Preventing full page reload on Backbone pushState

5 Answers5

Linked