Skip to content

Instantly share code, notes, and snippets.

@jumpinjackie
Created April 28, 2014 06:13
Show Gist options
  • Save jumpinjackie/11362959 to your computer and use it in GitHub Desktop.
Save jumpinjackie/11362959 to your computer and use it in GitHub Desktop.
<!DOCTYPE html>
<html>
<head>
<title>Chrome dun goof'd!</title>
<script type="text/javascript" src="//code.jquery.com/jquery-1.11.0.js"></script>
<script type="text/javascript" src="//underscorejs.org/underscore.js"></script>
<script type="text/javascript" src="//backbonejs.org/backbone.js"></script>
<script type="text/javascript">
var AppRouter = Backbone.Router.extend({
routes: {
"foo": "foo",
"bar": "bar",
"what": "what",
"home": "home"
},
foo: function() {
$("title").text("Chrome dun goof'd - foo");
$("#message").text("Route: foo");
},
bar: function() {
$("title").text("Chrome dun goof'd - bar");
$("#message").text("Route: bar");
},
what: function() {
$("title").text("Chrome dun goof'd - what");
$("#message").text("Route: what");
},
home: function() {
$("title").text("Chrome dun goof'd - home");
$("#message").text("Route: home");
}
});
$(window).bind("beforeunload", function() {
console.error("Did you hit the back button? If so, Chrome broke the Backbone router. Since when does going back from a hash change require a page refresh?");
return false;
});
var router = null;
$(document).ready(function() {
router = new AppRouter();
Backbone.history.start();
});
function navroute(hash) {
window.location.hash = hash;
}
function getRoute() {
var hash = Backbone.history.getHash();
if (hash.indexOf("?") > 0) {
hash = hash.substring(0, hash.indexOf("?"));
}
return hash;
}
function tackParams() {
var argStr = "";
var prefix = "param";
for (var i = 0; i < arguments.length; i++) {
if (i == 0)
argStr += prefix + (i + 1) + "=" + arguments[i];
else
argStr += "&" + prefix + (i + 1) + "=" + arguments[i];
}
//Backbone or raw, the effect still happens on Chrome
//Backbone method
//router.navigate(getRoute() + "?" + argStr, { trigger: false, replace: true });
//Raw method
window.location.replace("#" + getRoute() + "?" + argStr);
}
</script>
</head>
<body>
<ul>
<li>
<button onclick='navroute("#foo")'>Foo</button>
</li>
<li>
<button onclick='navroute("#bar")'>Bar</button>
</li>
<li>
<button onclick='navroute("#what")'>What</button>
</li>
<li>
<button onclick='navroute("#home")'>Home</button>
</li>
</ul>
<ul>
<li>
<button onclick='tackParams(1)'>Set 1 param</button>
</li>
<li>
<button onclick='tackParams(1, 2)'>Set 2 params</button>
</li>
<li>
<button onclick='tackParams(1, 2, 3)'>Set 3 params</button>
</li>
<li>
<button onclick='tackParams(1, 2, 3, 4)'>Set 4 params</button>
</li>
</ul>
<div id="message">
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment