Skip to content

Instantly share code, notes, and snippets.

Embed
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 + "//" + location.host + 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.
evt.preventDefault();
// 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);
}
});
@billy-ran-away

This comment has been minimized.

Copy link

commented Dec 27, 2012

Thank you!

@aroc

This comment has been minimized.

Copy link

commented Feb 3, 2013

Awesomeness! Thanks for sharing.

@jabbett

This comment has been minimized.

Copy link

commented Mar 19, 2013

Thanks, Tim!

I'm using mod_rewrite to get "normal" URLs, so I also check href if it begins with #

Look out for javascript: links, too.

@mikejholly

This comment has been minimized.

Copy link

commented Apr 7, 2013

Nice tip. Thanks!

@mikedhart

This comment has been minimized.

Copy link

commented Jul 22, 2013

Thank you, really cool.

@Filirom1

This comment has been minimized.

Copy link

commented Aug 23, 2013

thanks

@OscarGodson

This comment has been minimized.

Copy link

commented Nov 16, 2013

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

@adiktofsugar

This comment has been minimized.

Copy link

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.

@tonitech

This comment has been minimized.

Copy link

commented Dec 19, 2013

Thank you very much!!!

@thisiskylierose

This comment has been minimized.

Copy link

commented Feb 9, 2014

Thanks. This is a massive help.

@michaelkoper

This comment has been minimized.

Copy link

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

@michaelkoper

This comment has been minimized.

Copy link

commented Mar 7, 2014

@gabceb

This comment has been minimized.

Copy link

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 https://gist.github.com/gabceb/9629965

@wololodev

This comment has been minimized.

Copy link

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.

@calmdev

This comment has been minimized.

Copy link

commented Jun 21, 2014

Nice work — this works great!

@isayme

This comment has been minimized.

Copy link

commented Jul 9, 2014

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

@tbranyen

This comment has been minimized.

Copy link
Owner Author

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.

@luca-moser

This comment has been minimized.

Copy link

commented Apr 3, 2015

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

@jaapz

This comment has been minimized.

Copy link

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
You can’t perform that action at this time.