Skip to content

Instantly share code, notes, and snippets.

What would you like to do?
hijack links for pushState in Backbone
// All navigation that is relative should be passed through the navigate
// method, to be processed by the router. If the link has a `data-bypass`
// attribute, bypass the delegation completely.
$(document).on("click", "a[href]:not([data-bypass])", function(evt) {
// Get the absolute anchor href.
var href = { prop: $(this).prop("href"), attr: $(this).attr("href") };
// Get the absolute root.
var root = location.protocol + "//" + + Application.root;
// Ensure the root is part of the anchor href, meaning it's relative.
if (href.prop.slice(0, root.length) === root) {
// Stop the default event to ensure the link will not cause a page
// refresh.
// Note by using Backbone.history.navigate, router events will not be
// triggered. If this is a problem, change this to navigate on your
// router.
Backbone.history.navigate(href, true);
Copy link

mikedhart commented Jul 22, 2013

Thank you, really cool.

Copy link

Filirom1 commented Aug 23, 2013


Copy link

OscarGodson commented Nov 16, 2013

This doesn't seem to work anymore. Backbone.history._hasPushState is undefined now.

Copy link

adiktofsugar commented Nov 29, 2013

Cool. Doesn't work with anchors though. I just shoved in a

if (!href.match(/^#/)) {

before the protocol check to get it all working.

Copy link

tonitech commented Dec 19, 2013

Thank you very much!!!

Copy link

thisiskylierose commented Feb 9, 2014

Thanks. This is a massive help.

Copy link

michaelkoper commented Mar 7, 2014

Thanks a lot for this! Works great except if you are holding the cmd button to open links in a new tab

Copy link

michaelkoper commented Mar 7, 2014

Copy link

gabceb commented Mar 18, 2014

This gist seems to be close to #1 on Google when you search for backbone router links so here is the Coffeescript version

Copy link

wololodev commented Jun 7, 2014

Updated gist with protection for internal #div hash links, better cross domain link support, more efficient with $document caching, and does not use deprecated "delagate" method from jQuery.

Copy link

calmdev commented Jun 21, 2014

Nice work — this works great!

Copy link

isayme commented Jul 9, 2014

why use href.slice(protocol.length) instead of href.slice(0, protocol.length) ?
If href is relative url), the previous will return while the later return http://...

Copy link

tbranyen commented Mar 27, 2015

GitHub never notified me of any of these comments >_> I just updated the Gist to latest version I've been using.

Copy link

luca-moser commented Apr 3, 2015

Shouldn't it be href.attr in the navigate function?

Copy link

jaapz commented Jun 18, 2015

@XemsDoom yes it should

You also should probably add a check whether or not someone called preventDefault on the event.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment