Skip to content

Embed URL

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
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

Thank you!

@aroc

Awesomeness! Thanks for sharing.

@jabbett

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

Nice tip. Thanks!

@mikedhart

Thank you, really cool.

@Filirom1

thanks

@OscarGodson

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

@adiktofsugar

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

Thank you very much!!!

@thisiskylierose

Thanks. This is a massive help.

@michaelkoper

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

@gabceb

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

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

Nice work — this works great!

@isayme

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
Owner

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

@XemsDoom

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

@jaapz

@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
Something went wrong with that request. Please try again.