Created
April 25, 2012 14:46
-
-
Save toolmantim/2490277 to your computer and use it in GitHub Desktop.
A Backbone.js router subclass that disables the hash fallback mechanism in favour of just navigating to the location (just like a normal link would behave)
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| class MyApp.Router extends Backbone.Router | |
| hasPushState: window.history and window.history.pushState | |
| # Override the navigate function to remove Backbone's #hash fallback for | |
| # non-pushState browsers. Instead we just navigate to the new location using | |
| # window.location | |
| navigate: (fragment, trigger) -> | |
| if @hasPushState | |
| super(arguments...) | |
| else | |
| # Backbone navigate paths don't start with a forward slash, so we may | |
| # need to add one | |
| fragment = "/#{fragment}" unless fragment.match(/^\//) | |
| window.location = fragment | |
| # Navigates to the href property of an event's currentTarget whilst ignoring | |
| # right clicks, middle clicks, shift-clicks etc. | |
| # | |
| # Handy for using from within event handlers: | |
| # | |
| # class MyApp.HeaderView extends Backbone.View | |
| # events: | |
| # "click a.home": "home" | |
| # home: (e) -> | |
| # MyApp.router.navigateToLink(e) | |
| navigateToLink: (e, trigger=true) -> | |
| if e.which == 2 or e.metaKey or e.ctrlKey or e.shiftKey | |
| # Make sure we return true in case we're used as the return value for | |
| # the event handling function | |
| return true | |
| else | |
| # Backbone navigate paths don't start with a forward slash | |
| @navigate href.replace(/^\//,''), trigger | |
| e.preventDefault() |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| MyApp.Router = Backbone.Router.extend({ | |
| hasPushState: window.history && window.history.pushState, | |
| // Override the navigate function to remove Backbone's #hash fallback for | |
| // non-pushState browsers. Instead we just navigate to the new location using | |
| // window.location | |
| navigate: function(fragment, trigger) { | |
| if (this.hasPushState) { | |
| return Backbone.Router.prototype.navigate(fragment, trigger); | |
| } else { | |
| // Backbone navigate paths don't start with a forward slash, so we may | |
| // need to add one | |
| if (!fragment.match(/^\//)) fragment = "/" + fragment; | |
| window.location = fragment; | |
| } | |
| }, | |
| // Navigates to the href property of an event's currentTarget whilst ignoring | |
| // right clicks, middle clicks, shift-clicks etc. | |
| // | |
| // Handy for using from within event handlers: | |
| // | |
| // MyApp.HeaderView = Backbone.View.extend({ | |
| // events: { | |
| // "click a.home": "home" | |
| // }, | |
| // home: function(e) { | |
| // return MyApp.router.navigateToLink(e); | |
| // } | |
| // }) | |
| navigateToLink: function(e, trigger) { | |
| if (arguments.length != 2) | |
| trigger = true; | |
| if (e.which == 2 || e.metaKey || e.ctrlKey || e.shiftKey) { | |
| // Make sure we return true in case we're used as the return value for | |
| // the event handling function | |
| return true; | |
| } else { | |
| // Backbone navigate paths don't start with a forward slash | |
| this.navigate(href.replace(/^\//,''), trigger); | |
| e.preventDefault(); | |
| } | |
| } | |
| }); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
This gist looks a little outdated. As of 0.9.0, a
hashChange: falseoption forBackbone.history.start()has been added that should accomplish the goal of this gist.That aside, also as of 0.9.0, the parameters for
navigateare(fragment, options)and the linesdon't take into account the
rootoption (pre-0.9.0).