mrienstra · February 17, 2012 21:26
diff --git a/director_example2.htm b/director_example2.htm
 <!DOCTYPE html>
 <html>
  <head>
    <meta charset="utf-8">
    <title>A Gentle Introduction 2</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
    <script src="https://raw.github.com/flatiron/director/master/build/director-1.0.7.min.js"></script>
    <script>
    $('document').ready(function(){
      //
      // create some functions to be executed when
      // the correct route is issued by the user.
      //
      var showAuthorInfo = function () { console.log("showAuthorInfo"); },
          listBooks = function () { console.log("listBooks"); },
          allroutes = function() {
            var route = window.location.hash.slice(2),
                sections = $('section'),
                section;
            if ((section = sections.filter('[data-route=' + route + ']')).length) {
              sections.hide(250);
              section.show(250);
            }
          };
      
      //
      // define the routing table.
      //
      var routes = {
        '/author': showAuthorInfo,
        '/books': listBooks
      };
      
      //
      // instantiate the router.
      //
      var router = Router(routes);
      
      //
      // a global configuration setting.
      //
      router.configure({
        on: allroutes
      });
      router.init();
    });
    </script>
  </head>
  <body>
    <section data-route="author">Author Name</section>
    <section data-route="books">Book1, Book2, Book3</section>
    <ul>
      <li><a href="#/author">#/author</a></li>
      <li><a href="#/books">#/books</a></li>
    </ul>
  </body>
 </html>
diff --git a/gistfile1.md b/gistfile1.md
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	<title>A Gentle Introduction 2</title>
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
	<script src="https://raw.github.com/flatiron/director/master/build/director-1.0.7.min.js"></script>
	<script>
	$('document').ready(function(){
	//
	// create some functions to be executed when
	// the correct route is issued by the user.
	//
	var showAuthorInfo = function () { console.log("showAuthorInfo"); },
	listBooks = function () { console.log("listBooks"); },
	allroutes = function() {
	var route = window.location.hash.slice(2),
	sections = $('section'),
	section;
	if ((section = sections.filter('[data-route=' + route + ']')).length) {
	sections.hide(250);
	section.show(250);
	}
	};

	//
	// define the routing table.
	//
	var routes = {
	'/author': showAuthorInfo,
	'/books': listBooks
	};

	//
	// instantiate the router.
	//
	var router = Router(routes);

	//
	// a global configuration setting.
	//
	router.configure({
	on: allroutes
	});
	router.init();
	});
	</script>
	</head>
	<body>
	<section data-route="author">Author Name</section>
	<section data-route="books">Book1, Book2, Book3</section>
	<ul>
	<li><a href="#/author">#/author</a></li>
	<li><a href="#/books">#/books</a></li>
	</ul>
	</body>
	</html>