updated gitignore, updated build server to accept debug/release, reor…

…dered index.html

.gitignore

@@ -1,5 +1,4 @@
 dist/
 npm-debug.log
-node_modules/**/out
 .lock-wscript
-build/node_modules
+build/node_modules/grunt/node_modules/zlib.sync/build

app/index.js

@@ -20,6 +20,23 @@ this.namespace = {
     };
   }(),
 
+  // 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) {
+    // Should be an instant synchronous way of getting the template, if it
+    // exists in the JST object.
+    if (this.JST && this.JST[path]) {
+      return done(this.JST[path]);
+    }
+
+    // Fetch it asynchronously if not available from JST
+    return $.get(path, function(contents) {
+      done(_.template(contents));
+    });
+  },
+
   // Keep active application instances namespaced under an app object.
   app: _.extend({}, Backbone.Events)
 };
@@ -32,6 +49,32 @@ 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"
+    },
+
+    index: function() {
+      var tutorial = new Example.Views.Tutorial();
+
+      // Attach the tutorial to the DOM
+      tutorial.render(function(el) {
+        $("#main").html(el);
+      });
+    }
+  });
+
+  // Define your master router on the application namespace and trigger all
+  // navigation from this instance.
+  app.router = new Router();
+
+  // Trigger the initial route and enable HTML5 History API support
+  Backbone.history.start({ pushState: true });
+
   // All navigation that is relative should be passed through the navigate
   // method, to be processed by the router.
   $(document).delegate("a", "click", function(evt) {
@@ -51,25 +94,4 @@ jQuery(function($) {
       app.router.navigate(href, true);
     }
   });
-
-  // Defining the application router, you can attach sub routers here, but
-  // typically if you're going to work with more than one router, you will
-  // use something like backbone.routemanager.
-  var Router = Backbone.Router.extend({
-    routes: {
-      "": "index"
-    },
-
-    index: function() {
-      //alert("Welcome to the homepage");
-    }
-  });
-
-  // Define your master router on the application namespace and trigger all
-  // navigation from this instance.
-  app.router = new Router();
-
-  // Trigger the initial route and enable HTML5 History API support
-  Backbone.history.start({ pushState: true });
-
 });

app/modules/example.js

@@ -15,20 +15,24 @@
 //
 (function(Example) {
 
-  Example.Model = Backbone.Model.extend({
-    /* ... */
-  });
+  Example.Model = Backbone.Model.extend({ /* ... */ });
+  Example.Collection = Backbone.Collection.extend({ /* ... */ });
+  Example.Router = Backbone.Router.extend({ /* ... */ });
 
-  Example.Collection = Backbone.Collection.extend({
-    /* ... */
-  });
+  // Render the template
+  Example.Views.Tutorial = Backbone.View.extend({
+    template: "app/templates/example.html",
 
-  Example.Views.Detailed = Backbone.View.extend({
-    /* ... */
-  });
+    render: function(done) {
+      var view = this;
 
-  Example.Router = Backbone.Router.extend({
-    /* ... */
+      namespace.fetchTemplate(this.template, function(tmpl) {
+        view.el.innerHTML = tmpl();
+
+        done(view.el);
+      });
+    }
   });
 
+
 })(namespace.module("example"));

build/config.js

@@ -6,22 +6,33 @@ config.init({
   },
 
   concat: {
-    "dist/debug/libs.js": ["assets/js/libs/*.js"],
-    "dist/debug/modules.js": ["app/modules/*.js"]
+
+    // The core library files
+    "dist/debug/js/libs.js": [
+      "assets/js/libs/jquery.js",
+      "assets/js/libs/underscore.js",
+      "assets/js/libs/backbone.js"
+    ],
+
+    // Application files
+    "dist/debug/js/app.js": ["app/*.js", "app/modules/*.js"],
+
+    // Any CSS files
+    "dist/debug/css/style.css": ["assets/css/*.css"]
   },
 
   jst: {
-    "dist/debug/templates.js": ["app/templates/*.html"]
+    "dist/debug/js/templates.js": ["app/templates/*.html"]
   },
 
   min: {
-    "dist/release/libs.min.js": ["dist/debug/libs.js"],
-    "dist/release/modules.min.js": ["dist/debug/modules.js"],
-    "dist/release/templates.min.js": ["dist/debug/templates.js"]
+    "dist/release/js/libs.js": ["dist/debug/js/libs.js"],
+    "dist/release/js/app.js": ["dist/debug/js/app.js"],
+    "dist/release/js/templates.js": ["dist/debug/js/templates.js"]
   },
 
   mincss: {
-    "dist/release/style.css": ["assets/css/style.css"]
+    "dist/release/css/style.css": ["dist/debug/css/style.css"]
   },
 
   watch: {

build/server.js

@@ -3,9 +3,16 @@ var fs = require("fs");
 var express = require("express");
 var site = express.createServer();
 
+// Determine which dist directory to use
+var dir = process.argv.length > 2 && "./dist/" + process.argv[2];
+
+// Use custom JS folder based off debug or release
+dir && site.use("/assets/js", express.static(dir + "/js"));
+dir && site.use("/assets/css", express.static(dir + "/css"));
+
 // Serve static files
-site.use("/assets", express.static("./assets"));
 site.use("/app", express.static("./app"));
+site.use("/assets", express.static("./assets"));
 
 // Ensure all routes go home, client side app..
 site.get("*", function(req, res) {
@@ -15,4 +22,4 @@ site.get("*", function(req, res) {
 // Actually listen
 site.listen(8000);
 
-console.log("Listening on http://localhost:8000");
+console.log("Server listening on http://localhost:8000");

index.html

@@ -14,12 +14,25 @@
   <!-- Main container -->
   <div role="main" id="main"></div>
 
-  <!-- Dependencies -->
+  <!-- Not using the build tool? Keep the following as-is. -->
+
+  <!-- Libraries -->
   <script src="/assets/js/libs/jquery.js"></script>
   <script src="/assets/js/libs/underscore.js"></script>
   <script src="/assets/js/libs/backbone.js"></script>
 
   <!-- Application -->
   <script src="/app/index.js"></script>
+  <script src="/app/modules/example.js"></script>
+
+  <!-- If using the build tool you can uncomment the following lines
+       and use these instead.  They will toggle based on if you are
+       using debug or release. -->
+
+  <!--
+  <script src="/assets/js/libs.js"></script>
+  <script src="/assets/js/templates.js"></script>
+  <script src="/assets/js/app.js"></script>
+  -->
 </body>
 </html>