nickfun · January 22, 2013 18:31
diff --git a/bb-router.html b/bb-router.html
 <!DOCTYPE html>
 <html>
 <head>
  <title>Web Page</title>
 	<meta charset="utf-8">
 	<link href="css/grid.css" type="text/css" rel="stylesheet" media="screen"/>
 	<style>
 		/* local style */
 	</style>
 	<script src="js/lib/jquery.js"></script>
 	<script src="js/lib/lodash.js"></script>
 	<script src="js/lib/backbone.js"></script>
 	<script>
 		// javascript here
 		
 		$(document).ready(function() {
 			'use strict';
 			// code to execute when page is loaded

 			var Router = Backbone.Router.extend({
 				routes: {
 					'': 'defaultRoute',
 					'one': 'one',
 					'two/:num': 'two',
 					'three/(:abc/:ddd/(:zzz))': 'complex'
 				}
 			});

 			var router = new Router();

 			router.on('route:defaultRoute', function(x) {
 				console.log(x);
 				$('#col1').css('background-color: red;');
 				$('#col3').append('<p>Default Route</p>');
 			});

 			router.on('route:one', function(x) {
 				console.log(x);
 				$('#col3').append('<p>One</p>');
 			});

 			router.on('route:two', function(x) {
 				console.log(x);
 				$('#col3').append('<p>Two</p>');
 			});

 			router.on('route:complex', function( aaa, bbb, ccc) {
 				console.log([aaa,bbb,ccc]);
 				$('#col3').append('<p>Complex</p>');
 			})

 		    Backbone.history.start();

 		});
 	</script>
 </head>
 <body>
 	<div class="row">
 		<div id="col1" class="column grid_3"> 3 </div>
 		<div id="col2" class="column grid_3">
 			<ul>
 				<li><a href="#">default</a></li>
 				<li><a href="#one">one</a></li>
 				<li><a href="#two/33">two/33</a></li>
 				<li><a href="#three/33">complex 1</a></li>
 				<li><a href="#three/abc/123">complex 2</a></li>
 				<li><a href="#three/zzz/yyy/fart">complex 3</a></li>
 			</ul>	
 		</div>
 		<div id="col3" class="column grid_3"> 3 </div>
 	</div>
 </body>
 </html>
	<!DOCTYPE html>
	<html>
	<head>
	<title>Web Page</title>
	<meta charset="utf-8">
	<link href="css/grid.css" type="text/css" rel="stylesheet" media="screen"/>
	<style>
	/* local style */
	</style>
	<script src="js/lib/jquery.js"></script>
	<script src="js/lib/lodash.js"></script>
	<script src="js/lib/backbone.js"></script>
	<script>
	// javascript here

	$(document).ready(function() {
	'use strict';
	// code to execute when page is loaded

	var Router = Backbone.Router.extend({
	routes: {
	'': 'defaultRoute',
	'one': 'one',
	'two/:num': 'two',
	'three/(:abc/:ddd/(:zzz))': 'complex'
	}
	});

	var router = new Router();

	router.on('route:defaultRoute', function(x) {
	console.log(x);
	$('#col1').css('background-color: red;');
	$('#col3').append('<p>Default Route</p>');
	});

	router.on('route:one', function(x) {
	console.log(x);
	$('#col3').append('<p>One</p>');
	});

	router.on('route:two', function(x) {
	console.log(x);
	$('#col3').append('<p>Two</p>');
	});

	router.on('route:complex', function( aaa, bbb, ccc) {
	console.log([aaa,bbb,ccc]);
	$('#col3').append('<p>Complex</p>');
	})

	Backbone.history.start();

	});
	</script>
	</head>
	<body>
	<div class="row">
	<div id="col1" class="column grid_3"> 3 </div>
	<div id="col2" class="column grid_3">
	<ul>
	<li><a href="#">default</a></li>
	<li><a href="#one">one</a></li>
	<li><a href="#two/33">two/33</a></li>
	<li><a href="#three/33">complex 1</a></li>
	<li><a href="#three/abc/123">complex 2</a></li>
	<li><a href="#three/zzz/yyy/fart">complex 3</a></li>
	</ul>
	</div>
	<div id="col3" class="column grid_3"> 3 </div>
	</div>
	</body>
	</html>