hijack links for pushState in Backbone

backbone_pushstate_router.js

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

Fixed it here: https://gist.github.com/michaelkoper/9402728

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!

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

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

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

@XemsDoom yes it should

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