BackboneJS PushState prevent page reload

Question

BackboneJS PushState prevent page reload

I have this issue with that when I click on anchors, that the page reloads, which I want to avoid even though I'm using pushstate:true

So, inside my main.js I have:

Backbone.history.start({ pushState: true, root: App.ROOT });

$(document).on('click', 'a:not([data-bypass])', function (evt) {

    var href = $(this).attr('href');

        if (href && href.indexOf('#') === 0) {
            evt.preventDefault();
            Backbone.history.navigate(href, true);
        }
});

So, I tried to change it like mentioned here Preventing full page reload on Backbone pushState - but without success.

I'm using BackboneJS, NodeJS and HandlebarsJS

Is there any solution to this?

javascript
jquery
node.js
backbone.js
handlebars.js

Answer 1

pushState: true has nothing to do with preventing loading full page when you click links, it's only a way to update url address in the browser address bar. It's evt.preventDefault() that should prevent default behaviour of links.

Your provided code applies evt.preventDefault() very selectively in a sense that, according to your code, links that don't start with # work just like links are usually expected to work - loading that page afresh.