erikeldridge/index.html

## index.html
<!DOCTYPE html>
<html>
  <body>
    <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="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
    <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';
      if(/\/edit\/\d+/.test(path)){
        view = 'edit';
      }else if(/\/\d+/.test(path)){
        view = 'timeline';
      }
      console.log('routing to', view);
      views[view]();
    }
    $('a.js-nav').click(function(){
      route(this.href);
      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
    $('.create').click(function(){
      console.log('creating new record ...');
      var id = 1;
      route('/'+id);
      return false;
    });
    </script>
  </body>
</html>
	<!DOCTYPE html>
	<html>
	<body>
	<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="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
	<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';
	if(/\/edit\/\d+/.test(path)){
	view = 'edit';
	}else if(/\/\d+/.test(path)){
	view = 'timeline';
	}
	console.log('routing to', view);
	views[view]();
	}
	$('a.js-nav').click(function(){
	route(this.href);
	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
	$('.create').click(function(){
	console.log('creating new record ...');
	var id = 1;
	route('/'+id);
	return false;
	});
	</script>
	</body>
	</html>