Skip to content

Instantly share code, notes, and snippets.

What would you like to do?
pushState routing boilerplate
<!DOCTYPE html>
<a href="/edit/1" class="js-nav">edit</a><br/>
<a href="/1" class="js-nav">1</a><br/>
<a href="/" class="js-nav">default</a><br/>
<a href="#" class="create">create</a>
<script src=""></script>
var views = {};
views.edit = function(){
console.log('rendering edit view');
views.default = function(){
console.log('rendering default view');
views.timeline = function(){
console.log('rendering timeline view');
// nav routing
function route(path, push){
if(false !== push){
window.history.pushState(null, null, path);
var view = 'default';
view = 'edit';
}else if(/\/\d+/.test(path)){
view = 'timeline';
console.log('routing to', view);
return false;
// back-button and page load routing
window.addEventListener("popstate", function(e) {
console.log('popping state', document.location.pathname);
route(document.location.pathname, false);
// route after action
console.log('creating new record ...');
var id = 1;
return false;
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment