refactored github-viewer to the latest layoutmanager and code practices

app/app.js

@@ -35,22 +35,24 @@ function($, _, Backbone) {
 
   // Configure LayoutManager with Backbone Boilerplate defaults.
   Backbone.LayoutManager.configure({
+    // Allow LayoutManager to augment Backbone.View.prototype.
     manage: true,
 
-    paths: {
-      layout: "app/templates/layouts/",
-      template: "app/templates/"
-    },
+    prefix: "app/templates/",
 
     fetch: function(path) {
+      // Concatenate the file extension.
       path = path + ".html";
 
+      // If cached, use the compiled template.
+      if (JST[path]) {
+        return JST[path];
+      }
+
+      // Put fetch into `async-mode`.
       var done = this.async();
 
-      if (JST[path]) {
-        return done(JST[path]);
-      } 
-
+      // Seek out the template asynchronously.
       $.get(app.root + path, function(contents) {
         done(JST[path] = _.template(contents));
       });
@@ -64,36 +66,15 @@ function($, _, Backbone) {
       return _.extend({ Views: {} }, additionalProps);
     },
 
-    // Helper for specific layouts.
-    useLayout: function(name) {
-      // If already using this Layout, then don't re-inject into the DOM.
-      if (this.layout && this.layout.options.template === name) {
-        return this.layout;
-      }
-
-      // If a layout already exists, remove it from the DOM.
-      if (this.layout) {
-        this.layout.remove();
-      }
-
-      // Create a new Layout.
-      var layout = new Backbone.Layout({
-        template: name,
-        className: "layout " + name,
-        id: "layout"
-      });
-
-      // Insert into the DOM.
-      $("#main").empty().append(layout.el);
-
-      // Render the layout.
-      layout.render();
-
-      // Cache the reference on the Router.
-      this.layout = layout;
+    // Helper for using layouts.
+    useLayout: function(name, options) {
+      // Create a new Layout with options.
+      var layout = new Backbone.Layout(_.extend({
+        el: "#main"
+      }, options));
 
-      // Return the reference, for later usage.
-      return layout;
+      // Cache the refererence.
+      return this.layout = layout;
     }
   }, Backbone.Events);
 

app/main.js

@@ -7,7 +7,6 @@ require([
 ],
 
 function(app, Router) {
-  var lol;
 
   // Define your master router on the application namespace and trigger all
   // navigation from this instance.

app/modules/commit.js

@@ -66,23 +66,24 @@ function(app, Backbone) {
 
     beforeRender: function() {
       this.$el.children().remove();
-      this.collection.each(function(commit) {
+
+      this.options.commits.each(function(commit) {
         this.insertView(new Commit.Views.Item({
           model: commit,
-          repo: this.collection.repo,
-          user: this.collection.user
+          repo: this.options.commits.repo,
+          user: this.options.commits.user
         }));
       }, this);
     },
 
     cleanup: function() {
-      this.collection.off(null, null, this);
+      this.options.commits.off(null, null, this);
     },
 
     initialize: function() {
-      this.collection.on("reset", this.render, this);
+      this.options.commits.on("reset", this.render, this);
 
-      this.collection.on("fetch", function() {
+      this.options.commits.on("fetch", function() {
         this.$el.html("<img src='/assets/img/spinner.gif'>");
       }, this);
     }

app/modules/repo.js

@@ -83,14 +83,14 @@ function(app, Backbone, Commit) {
 
     serialize: function() {
       return {
-        count: this.collection.length 
+        count: this.options.repos.length 
       };
     },
 
     beforeRender: function() {
-      var active = app.router.commits.repo;
+      var active = this.options.commits.repo;
 
-      this.collection.each(function(repo) {
+      this.options.repos.each(function(repo) {
         if (repo.get("name") === active) {
           app.active = repo;
         }
@@ -102,13 +102,13 @@ function(app, Backbone, Commit) {
     },
 
     cleanup: function() {
-      this.collection.off(null, null, this);
+      this.options.repos.off(null, null, this);
     },
 
     initialize: function() {
-      this.collection.on("reset", this.render, this);
+      this.options.repos.on("reset", this.render, this);
 
-      this.collection.on("fetch", function() {
+      this.options.repos.on("fetch", function() {
         this.$("ul").parent().html("<img src='/assets/img/spinner.gif'>");
       }, this);
     }

app/modules/user.js

@@ -45,7 +45,7 @@ function(app, Backbone, Repo) {
 
     tagName: "li",
 
-    serialize: function() {
+    data: function() {
       return { model: this.model };
     },
 
@@ -73,12 +73,16 @@ function(app, Backbone, Repo) {
   User.Views.List = Backbone.View.extend({
     template: "user/list",
 
-    serialize: function() {
-      return { collection: this.collection };
+    data: function() {
+      return { collection: this.options.users };
+    },
+
+    cleanup: function() {
+      this.options.users.off(null, null, this);
     },
 
     beforeRender: function() {
-      this.collection.each(function(user) {
+      this.options.users.each(function(user) {
         this.insertView("ul", new User.Views.Item({
           model: user
         }));
@@ -91,9 +95,9 @@ function(app, Backbone, Repo) {
     },
 
     initialize: function() {
-      this.collection.on("reset", this.render, this);
+      this.options.users.on("reset", this.render, this);
 
-      this.collection.on("fetch", function() {
+      this.options.users.on("fetch", function() {
         this.$("ul").parent().html("<img src='/assets/img/spinner-gray.gif'>");
       }, this);
     },

app/router.js

@@ -20,19 +20,14 @@ function(app, Repo, User, Commit) {
     },
 
     index: function() {
+      // Reset the state and render.
       this.reset();
-
-      // Use the main layout.
-      app.useLayout("main");
     },
 
     org: function(name) {
-      // Reset to initial state.
+      // Reset the state and render.
       this.reset();
 
-      // Use the main layout.
-      app.useLayout("main");
-
       // Set the organization.
       this.users.org = name;
 
@@ -41,12 +36,9 @@ function(app, Repo, User, Commit) {
     },
 
     user: function(org, name) {
-      // Reset to initial state.
+      // Reset the state and render.
       this.reset();
 
-      // Use the main layout.
-      app.useLayout("main").render();
-
       // Set the organization.
       this.users.org = org;
       // Set the user name.
@@ -58,12 +50,9 @@ function(app, Repo, User, Commit) {
     },
 
     repo: function(org, user, name) {
-      // Reset to initial state.
+      // Reset the state and render.
       this.reset();
 
-      // Use the main layout.
-      app.useLayout("main").render();
-
       // Set the organization.
       this.users.org = org;
       // Set the user name.
@@ -103,29 +92,26 @@ function(app, Repo, User, Commit) {
     },
 
     initialize: function() {
-      // Set up the users.
-      this.users = new User.Collection();
-      // Set the repos.
-      this.repos = new Repo.Collection();
-      // Set up the commits.
-      this.commits = new Commit.Collection();
+      var collections = {
+        // Set up the users.
+        users: new User.Collection(),
+
+        // Set the repos.
+        repos: new Repo.Collection(),
+
+        // Set up the commits.
+        commits: new Commit.Collection()
+      };
+
+      // Ensure the router has references to the collections.
+      _.extend(this, collections);
 
       // Use main layout and set Views.
-      app.useLayout("main");
-
-      app.layout.setViews({
-        ".users": new User.Views.List({
-          collection: this.users
-        }),
-
-        ".repos": new Repo.Views.List({
-          collection: this.repos
-        }),
-
-        ".commits": new Commit.Views.List({
-          collection: this.commits
-        })
-      });
+      app.useLayout().setViews({
+        ".users": new User.Views.List(collections),
+        ".repos": new Repo.Views.List(collections),
+        ".commits": new Commit.Views.List(collections)
+      }).render();
     }
   });