Split namespace & init

Namespace is defined in app/namespace.js, app init is defined in index.js.
Load order in index.html and build/config.js were changed to:
app/namespace.js
app/modules/*.js
app/index.js

app/index.js

@@ -1,47 +1,70 @@
-// Change *namespace* to your namespace!
-// This contains the module definition factory function, application state,
-// events, and the router.
-this.namespace = {
-  // Assist with code organization, by breaking up logical components of code
-  // into modules.
-  module: function() {
-    // Internal module cache.
-    var modules = {};
-
-    // Create a new module reference scaffold or load an existing module.
-    return function(name) {
-      // If this module has already been created, return it.
-      if (modules[name]) {
-        return modules[name];
-      }
-
-      // Create a module and save it under this name
-      return modules[name] = { Views: {} };
-    };
-  }(),
-
-  // This is useful when developing if you don't want to use a
-  // build process every time you change a template.
-  //
-  // Delete if you are using a different template loading method.
-  fetchTemplate: function(path, done) {
-    window.JST = window.JST || {};
-
-    // Should be an instant synchronous way of getting the template, if it
-    // exists in the JST object.
-    if (JST[path]) {
-      return done(JST[path]);
+// Treat the jQuery ready function as the entry point to the application.
+// Inside this function, kick-off all initialization, everything up to this
+// point should be definitions.
+jQuery(function($) {
+
+  // Shorthand the application namespace
+  var app = namespace.app;
+
+  // Include the example module
+  var Example = namespace.module("example");
+
+  // Defining the application router, you can attach sub routers here.
+  var Router = Backbone.Router.extend({
+    routes: {
+      "": "index",
+      ":hash": "index"
+    },
+
+    index: function(hash) {
+      var route = this;
+      var tutorial = new Example.Views.Tutorial();
+
+      // Attach the tutorial to the DOM
+      tutorial.render(function(el) {
+        $("#main").html(el);
+
+        // Fix for hashes in pushState and hash fragment
+        if (hash && !route._alreadyTriggered) {
+          // Reset to home, pushState support automatically converts hashes
+          Backbone.history.navigate("", false);
+
+          // Trigger the default browser behavior
+          location.hash = hash;
+
+          // Set an internal flag to stop recursive looping
+          route._alreadyTriggered = true;
+        }
+      });
     }
+  });
+
+  // Define your master router on the application namespace and trigger all
+  // navigation from this instance.
+  app.router = new Router();
 
-    // Fetch it asynchronously if not available from JST
-    return $.get(path, function(contents) {
-      var tmpl = _.template(contents);
-      JST[path] = tmpl;
+  // Trigger the initial route and enable HTML5 History API support
+  Backbone.history.start({ pushState: true });
 
-      done(tmpl);
-    });
-  },
+  // All navigation that is relative should be passed through the navigate
+  // method, to be processed by the router.  If the link has a data-bypass
+  // attribute, bypass the delegation completely.
+  $(document).on("click", "a:not([data-bypass])", function(evt) {
+    // Get the anchor href and protcol
+    var href = $(this).attr("href");
+    var protocol = this.protocol + "//";
 
-  // Keep active application instances namespaced under an app object.
-  app: _.extend({}, Backbone.Events)
-};
+    // Ensure the protocol is not part of URL, meaning its relative.
+    if (href.slice(0, protocol.length) !== protocol) {
+      // Stop the default event to ensure the link will not cause a page
+      // refresh.
+      evt.preventDefault();
+
+      // This uses the default router defined above, and not any routers
+      // that may be placed in modules.  To have this work globally (at the
+      // cost of losing all route events) you can change the following line
+      // to: Backbone.history.navigate(href, true);
+      app.router.navigate(href, true);
+    }
+  });
+});

app/namespace.js

@@ -0,0 +1,47 @@
+// Change *namespace* to your namespace!
+// This contains the module definition factory function, application state,
+// events, and the router.
+this.namespace = {
+  // Assist with code organization, by breaking up logical components of code
+  // into modules.
+  module: function() {
+    // Internal module cache.
+    var modules = {};
+
+    // Create a new module reference scaffold or load an existing module.
+    return function(name) {
+      // If this module has already been created, return it.
+      if (modules[name]) {
+        return modules[name];
+      }
+
+      // Create a module and save it under this name
+      return modules[name] = { Views: {} };
+    };
+  }(),
+
+  // This is useful when developing if you don't want to use a
+  // build process every time you change a template.
+  //
+  // Delete if you are using a different template loading method.
+  fetchTemplate: function(path, done) {
+    window.JST = window.JST || {};
+
+    // Should be an instant synchronous way of getting the template, if it
+    // exists in the JST object.
+    if (JST[path]) {
+      return done(JST[path]);
+    }
+
+    // Fetch it asynchronously if not available from JST
+    return $.get(path, function(contents) {
+      var tmpl = _.template(contents);
+      JST[path] = tmpl;
+
+      done(tmpl);
+    });
+  },
+
+  // Keep active application instances namespaced under an app object.
+  app: _.extend({}, Backbone.Events)
+};

build/config.js

@@ -18,7 +18,7 @@ config.init({
     ],
 
     // Application files
-    "dist/debug/js/app.js": ["app/index.js", "app/modules/*.js", "app/app.js"],
+    "dist/debug/js/app.js": ["app/namespace.js", "app/modules/*.js", "app/index.js"],
 
     // Your CSS
     "dist/debug/css/style.css": ["assets/css/*.css"]

index.html

@@ -25,9 +25,9 @@
   <script src="/assets/js/libs/backbone.js"></script>
 
   <!-- Application -->
-  <script src="/app/index.js"></script>
+  <script src="/app/namespace.js"></script>
   <script src="/app/modules/example.js"></script>
-  <script src="/app/app.js"></script>
+  <script src="/app/index.js"></script>
 
   <!--
        If using the build tool you can uncomment the following lines and use