mrienstra/director_example2.htm

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

## gistfile1.md

      
    Raw
  

              gistfile1.md
            
          
    Trying to get the 2nd director example working, see https://github.com/flatiron/director#client-side
As-is, it is broken in several ways (I'm talking about the code in the README.md, not the code in this gist, which is working).
sections.find('data-route[' + route + ']').show();
jQuery's .find() gets "the descendants of each element in the current set of matched elements, filtered by a selector, jQuery object, or element." -- in this instance we'd want to use .filter().
router.configure({
  on: allroutes
});
No arguments are passed to allroutes -- maybe this used to work? How would it be done now? I played around for a bit, and tried digging in the source, but couldn't figure it out.
For now, the closest thing I could come up with was using window.location.hash.
	<!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>