hijack links for pushState in Backbone

// Use absolute URLs to navigate to anything not in your Router.

// Only need this for pushState enabled browsers

if (Backbone.history && Backbone.history._hasPushState) {

// Use delegation to avoid initial DOM selection and allow all matching elements to bubble

$(document).delegate("a", "click", function(evt) {

// Get the anchor href and protcol

var href = $(this).attr("href");

var protocol = this.protocol + "//";

// Ensure the protocol is not part of URL, meaning its relative.

// Stop the event bubbling to ensure the link will not cause a page refresh.

if (href.slice(protocol.length) !== protocol) {

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 commented 2012-12-27

Thank you!

aroc commented 2013-02-03

Awesomeness! Thanks for sharing.

jabbett commented 2013-03-19

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 commented 2013-04-07

Nice tip. Thanks!

mikedhart commented 2013-07-22

Thank you, really cool.

Filirom1 commented 2013-08-23

thanks

OscarGodson commented 2013-11-16

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

adiktofsugar commented 2013-11-29

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 commented 2013-12-19

Thank you very much!!!

thisiskylierose commented 2014-02-09

Thanks. This is a massive help.

michaelkoper commented 2014-03-07

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

michaelkoper commented 2014-03-07

public tbranyen / backbone_pushstate_router.js Last active 2014-03-11