Create a gist now

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 + "//" + 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.

Show comment Hide comment
@billy-ran-away

billy-ran-away Dec 27, 2012

Thank you!

Thank you!

@aroc

This comment has been minimized.

Show comment Hide comment
@aroc

aroc Feb 3, 2013

Awesomeness! Thanks for sharing.

aroc commented Feb 3, 2013

Awesomeness! Thanks for sharing.

@jabbett

This comment has been minimized.

Show comment Hide comment
@jabbett

jabbett 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.

jabbett 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.

Show comment Hide comment
@mikejholly

mikejholly Apr 7, 2013

Nice tip. Thanks!

Nice tip. Thanks!

@mikedhart

This comment has been minimized.

Show comment Hide comment
@mikedhart

mikedhart Jul 22, 2013

Thank you, really cool.

Thank you, really cool.

@Filirom1

This comment has been minimized.

Show comment Hide comment
@Filirom1

Filirom1 Aug 23, 2013

thanks

thanks

@OscarGodson

This comment has been minimized.

Show comment Hide comment
@OscarGodson

OscarGodson Nov 16, 2013

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

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

@adiktofsugar

This comment has been minimized.

Show comment Hide comment
@adiktofsugar

adiktofsugar 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.

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.

Show comment Hide comment
@tonitech

tonitech Dec 19, 2013

Thank you very much!!!

Thank you very much!!!

@thisiskylierose

This comment has been minimized.

Show comment Hide comment
@thisiskylierose

thisiskylierose Feb 9, 2014

Thanks. This is a massive help.

Thanks. This is a massive help.

@michaelkoper

This comment has been minimized.

Show comment Hide comment
@michaelkoper

michaelkoper 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

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.

Show comment Hide comment
@gabceb

This comment has been minimized.

Show comment Hide comment
@gabceb

gabceb 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

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

@wololodev

This comment has been minimized.

Show comment Hide comment
@wololodev

wololodev 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.

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.

Show comment Hide comment
@calmdev

calmdev Jun 21, 2014

Nice work — this works great!

calmdev commented Jun 21, 2014

Nice work — this works great!

@isayme

This comment has been minimized.

Show comment Hide comment
@isayme

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

isayme 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.

Show comment Hide comment
@tbranyen

tbranyen Mar 27, 2015

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

Owner

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.

@luca-moser

This comment has been minimized.

Show comment Hide comment
@luca-moser

luca-moser Apr 3, 2015

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

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

@jaapz

This comment has been minimized.

Show comment Hide comment
@jaapz

jaapz Jun 18, 2015

@xemsdoom yes it should

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

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