Last active

Embed URL

HTTPS clone URL

SSH clone URL

You can clone with HTTPS or SSH.

Download Gist

hijack links for pushState in Backbone

View backbone_pushstate_router.js
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21
// 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);
}
});

Thank you!

Awesomeness! Thanks for sharing.

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.

Nice tip. Thanks!

Thank you, really cool.

thanks

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

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

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

before the protocol check to get it all working.

Thank you very much!!!

Thanks. This is a massive help.

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

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

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.

Nice work — this works great!

isayme commented

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://...

Owner

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Something went wrong with that request. Please try again.