nickfun/bb-router.html

## 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>