update to the modular backbone tutorial to give data from github and replace users with contributors

20 files changed, 514 insertions, 126 deletions

diff --git a/examples/modular-backbone/js/collections/contributors/ContributorsCollection.js b/examples/modular-backbone/js/collections/contributors/ContributorsCollection.js
new file mode 100644
index 0000000..78a9b4d
--- /dev/null
+++ b/examples/modular-backbone/js/collections/contributors/ContributorsCollection.js
@@ -0,0 +1,51 @@
+define([
+  'underscore',
+  'backbone',
+  'models/contributor/ContributorModel'
+], function(_, Backbone, ContributorModel){
+
+  var ContributorsCollection = Backbone.Collection.extend({
+      
+      model: ContributorModel,
+
+      initialize : function(models, options) {},
+      
+      url : function() {
+        return 'https://api.github.com/repos/thomasdavis/backbonetutorials/contributors';
+      },
+    
+      parse : function(data) {
+          var uniqueArray = this.removeDuplicates(data);
+          return uniqueArray;
+      },
+      
+      removeDuplicates: function(myArray) {
+
+          //credit: http://newcodeandroll.blogspot.ca/2012/01/how-to-find-duplicates-in-array-in.html  
+          // I was hoping underscore's _uniq would work here but it only seems to work for single values not objects               
+          var length = myArray.length;
+          var ArrayWithUniqueValues = [];
+          
+          var objectCounter = {};
+          
+          for (i = 0; i < length; i++) {
+          
+              var currentMemboerOfArrayKey = JSON.stringify(myArray[i]);
+              var currentMemboerOfArrayValue = myArray[i];
+            
+              if (objectCounter[currentMemboerOfArrayKey] === undefined){
+                  ArrayWithUniqueValues.push(currentMemboerOfArrayValue);
+                 objectCounter[currentMemboerOfArrayKey] = 1;
+              }else{
+                 objectCounter[currentMemboerOfArrayKey]++;
+              }
+          }
+      
+          return ArrayWithUniqueValues;
+      }        
+     
+  });
+
+  return ContributorsCollection;
+
+});
\ No newline at end of file
diff --git a/examples/modular-backbone/js/collections/projects.js b/examples/modular-backbone/js/collections/projects.js
deleted file mode 100644
index ae7c7b7..0000000
--- a/examples/modular-backbone/js/collections/projects.js
+++ /dev/null
@@ -1,16 +0,0 @@
-define([
-  'jquery',
-  'underscore',
-  'backbone',
-  'models/projects'
-], function($, _, Backbone, ProjectsModel){
-  var ProjectsCollection = Backbone.Collection.extend({
-    model: ProjectsModel,
-    initialize: function(){
-
-    }
-
-  });
- 
-  return ProjectsCollection;
-});
diff --git a/examples/modular-backbone/js/collections/projects/ProjectsCollection.js b/examples/modular-backbone/js/collections/projects/ProjectsCollection.js
new file mode 100644
index 0000000..a8b0676
--- /dev/null
+++ b/examples/modular-backbone/js/collections/projects/ProjectsCollection.js
@@ -0,0 +1,25 @@
+define([
+  'jquery',
+  'underscore',
+  'backbone',
+  'models/project/ProjectModel'
+], function($, _, Backbone, ProjectModel){
+  var ProjectsCollection = Backbone.Collection.extend({
+    model: ProjectModel,
+    
+    initialize: function(){
+
+      var project0 = new ProjectModel('Cross Domain', 'https://github.com/thomasdavis/backbonetutorials/tree/gh-pages/examples/cross-domain'); 
+      var project1 = new ProjectModel('Infinite Scroll', 'https://github.com/thomasdavis/backbonetutorials/tree/gh-pages/examples/infinite-scroll'); 
+      var project2 = new ProjectModel('Modular Backbone','https://github.com/thomasdavis/backbonetutorials/tree/gh-pages/examples/modular-backbone'); 
+      var project3 = new ProjectModel('Node MongoDB Mongoose Restify','https://github.com/thomasdavis/backbonetutorials/tree/gh-pages/examples/nodejs-mongodb-mongoose-restify');
+      var project4 = new ProjectModel('Todo App','https://github.com/thomasdavis/backbonetutorials/tree/gh-pages/examples/todo-app');
+
+      //this.add([project0, project1, project2, project3, project4]);
+
+    }
+
+  });
+ 
+  return ProjectsCollection;
+});
diff --git a/examples/modular-backbone/js/collections/template.js b/examples/modular-backbone/js/collections/template.js
deleted file mode 100644
index 0b3ccfc..0000000
--- a/examples/modular-backbone/js/collections/template.js
+++ /dev/null
@@ -1,8 +0,0 @@
-define([
-  'jquery',
-  'underscore',
-  'backbone'
-], function($, _, Backbone){
-
-  return {};
-});
diff --git a/examples/modular-backbone/js/models/contributor/ContributorModel.js b/examples/modular-backbone/js/models/contributor/ContributorModel.js
new file mode 100644
index 0000000..6bd95a4
--- /dev/null
+++ b/examples/modular-backbone/js/models/contributor/ContributorModel.js
@@ -0,0 +1,18 @@
+define([
+  'underscore',
+  'backbone',
+], function(_, Backbone) {
+
+  var ContributorModel = Backbone.Model.extend({
+
+  	defaults : {
+  		medalHex : '#A67D3D',
+  		picWidth : '100px',
+  		githubPath : 'concat github and login'
+  	}
+
+  });
+
+  return ContributorModel;
+
+});
diff --git a/examples/modular-backbone/js/models/owner/OwnerModel.js b/examples/modular-backbone/js/models/owner/OwnerModel.js
new file mode 100644
index 0000000..0867f56
--- /dev/null
+++ b/examples/modular-backbone/js/models/owner/OwnerModel.js
@@ -0,0 +1,28 @@
+define([
+  'underscore',
+  'backbone',
+], function(_, Backbone) {
+
+  var OwnerModel = Backbone.Model.extend({
+
+  		defaults : {
+          query : "unknown"
+      },  
+
+      initialize: function( options ) {
+  			this.query = options.query; 
+  		},
+
+		url : function() {
+	        return 'https://api.github.com/users/' + this.query;
+	    },
+	    
+	    parse : function(data) {  
+	        return data;
+	    }
+
+    });
+
+  	return OwnerModel;
+
+});
diff --git a/examples/modular-backbone/js/models/project/ProjectModel.js b/examples/modular-backbone/js/models/project/ProjectModel.js
new file mode 100644
index 0000000..ffbc25d
--- /dev/null
+++ b/examples/modular-backbone/js/models/project/ProjectModel.js
@@ -0,0 +1,10 @@
+define([
+  'underscore',
+  'backbone'
+], function(_, Backbone) {
+  
+  var ProjectModel = Backbone.Model.extend({});
+
+  return ProjectModel;
+
+});
diff --git a/examples/modular-backbone/js/models/projects.js b/examples/modular-backbone/js/models/projects.js
deleted file mode 100644
index 63ce123..0000000
--- a/examples/modular-backbone/js/models/projects.js
+++ /dev/null
@@ -1,15 +0,0 @@
-define([
-  'underscore',
-  'backbone'
-], function(_, Backbone) {
-  var ProjectsModel = Backbone.Model.extend({
-    defaults: {
-      score: 10
-    },
-    initialize: function(){
-    }
-    
-  });
-  return ProjectsModel;
-
-});
diff --git a/examples/modular-backbone/js/router.js b/examples/modular-backbone/js/router.js
index 4175c59..9239cb2 100644
--- a/examples/modular-backbone/js/router.js
+++ b/examples/modular-backbone/js/router.js
@@ -2,13 +2,17 @@
 define([
   'jquery',
   'underscore',
-  'backbone'
-], function($, _, Backbone ){
+  'backbone',
+  'views/home/HomeView',
+  'views/projects/ProjectsView',
+  'views/contributors/ContributorsView',
+  'views/footer/FooterView'
+], function($, _, Backbone, HomeView, ProjectsView, ContributorsView, FooterView) {
   var AppRouter = Backbone.Router.extend({
     routes: {
       // Define some URL routes
       'projects': 'showProjects',
-      'users': 'showUsers',
+      'users': 'showContributors',
       
       // Default
       '*actions': 'defaultAction'
@@ -16,29 +20,38 @@ define([
   });
   var initialize = function(){
     var app_router = new AppRouter;
+    
     app_router.on('route:showProjects', function(){
-      require(['views/projects/list'], function(ProjectListView) {
+   
         // Call render on the module we loaded in via the dependency array
-        // 'views/projects/list'
-        var projectListView = new ProjectListView();
-        projectListView.render();
-      })
+        var projectsView = new ProjectsView();
+        projectsView.render();
+
     });
-    app_router.on('route:showUsers', function () {
-      require(['views/users/list'], function(UserListView) {
-        // As above, call render on our loaded module
-        // 'views/users/list'
-        var userListView = new UserListView();
-        userListView.render();
-      });
+
+    app_router.on('route:showContributors', function () {
+    
+        // Like above, call render but know that this view has nested sub views which 
+        // handle loading and displaying data from the GitHub API  
+        var contributorsView = new ContributorsView();
+        //contributorsView.initialize();
+        //contributorsView.render();
+
     });
+
     app_router.on('route:defaultAction', function (actions) {
-      require(['views/home/main'], function(MainHomeView) {
-      // We have no matching route, lets display the home page 
-        var mainHomeView = new MainHomeView();
-        mainHomeView.render();
-      });
+     
+       // We have no matching route, lets display the home page 
+        var homeView = new HomeView();
+        homeView.render();
+
+         // unlike the above, we don't call render on this view
+        // as it will handle the render call internally after it
+        // loads data 
+        var footerView = new FooterView();
+
     });
+
     Backbone.history.start();
   };
   return { 
diff --git a/examples/modular-backbone/js/views/contributors/ContributorsListView.js b/examples/modular-backbone/js/views/contributors/ContributorsListView.js
new file mode 100644
index 0000000..629e96f
--- /dev/null
+++ b/examples/modular-backbone/js/views/contributors/ContributorsListView.js
@@ -0,0 +1,64 @@
+define([
+  'jquery',
+  'underscore',
+  'backbone',
+  'collections/contributors/ContributorsCollection',
+  'text!templates/contributors/contributorsListTemplate.html'
+], function($, _, Backbone, ContributorsCollection, contributorListTemplate){
+  
+  var ContributorsListView = Backbone.View.extend({
+    el : $("#contributors-list"),
+    tagName:"ul",
+    render : function() {
+
+        var that = this;
+        that.awardMedals(this.collection.models); 
+
+        var data = {
+              contributors: this.collection.models,
+              _: _ 
+            };
+
+        var compiledTemplate = _.template( contributorListTemplate, data );
+        $("#contributors-list").html( compiledTemplate ); 
+ 
+        return this;
+      }, 
+
+      awardMedals : function(aModels) {
+        var goldMedalHex = '#CFB52B';
+        var silverMedalHex = '#E6E8FA';
+        var bronzeMedalHex = '#A67D3D';
+        var githubPath;
+
+        _.each(aModels, function(contributor) {
+
+            var contributions = Number ( contributor.get( 'contributions' ) );
+            var medalHex; 
+            var picWidth; 
+
+            if ( contributions >= 50 ) {
+              medalHex = goldMedalHex;
+              picWidth = '160px';
+            } else if ( contributions < 50 && contributions >= 5) {
+              medalHex = silverMedalHex;
+              picWidth = '120px';
+            } else {
+              medalHex = bronzeMedalHex;
+              picWidth = '80px';
+            }
+
+            githubPath = "https://github.com/" + contributor.get('login');
+
+            contributor.set( 'medalHex', medalHex);
+            contributor.set( 'picWidth', picWidth);
+            contributor.set( 'githubPath', githubPath);
+
+        });
+      }
+
+  });
+
+  return ContributorsListView;
+
+});
diff --git a/examples/modular-backbone/js/views/contributors/ContributorsView.js b/examples/modular-backbone/js/views/contributors/ContributorsView.js
new file mode 100644
index 0000000..24644c9
--- /dev/null
+++ b/examples/modular-backbone/js/views/contributors/ContributorsView.js
@@ -0,0 +1,60 @@
+define([
+  'jquery',
+  'underscore',
+  'backbone',
+  'collections/contributors/ContributorsCollection',
+  'views/contributors/ContributorsListView',
+  'text!templates/contributors/contributorsTemplate.html'
+], function($, _, Backbone, ContributorsCollection, ContributorsListView, contributorsTemplate){
+
+  var ContributorsView = Backbone.View.extend({
+    
+    el: $("#page"),
+
+    initialize:function() {
+
+      var that = this;
+
+      var onDataHandler = function(collection) {
+          that.render();
+      }
+
+      this.collection = new ContributorsCollection([]); 
+      this.collection.fetch({ success : onDataHandler });
+
+    },
+
+    render: function(){
+
+      var total_contributions = this.getTotalContributions(this.collection.models);
+      var total_contributors = this.collection.models.length;  
+    
+      var data = { total_contributions : total_contributions, 
+                  total_contributors : total_contributors}; 
+
+      // main view  
+      var compiledTemplate = _.template( contributorsTemplate, data );
+      this.$el.html( compiledTemplate ); 
+
+      // sub view 
+      var contributorsListView = new ContributorsListView({ collection: this.collection}); 
+      contributorsListView.render();
+
+    },
+
+    getTotalContributions:function( aModels ){
+
+      var total = 0;
+      
+      _.each(aModels, function(contributorModel) { 
+         var contributorContributions = Number ( contributorModel.get("contributions") );
+         total += contributorContributions; 
+      });
+
+      return total; 
+    }
+
+
+  });
+  return ContributorsView;
+});
diff --git a/examples/modular-backbone/js/views/contributors/contributor/ContributorView.js b/examples/modular-backbone/js/views/contributors/contributor/ContributorView.js
new file mode 100644
index 0000000..299153d
--- /dev/null
+++ b/examples/modular-backbone/js/views/contributors/contributor/ContributorView.js
@@ -0,0 +1,50 @@
+define([
+  'underscore',
+  'backbone',
+  'models/contributor/ContributorModel'
+], function(_, Backbone, ContributorModel){    
+    
+    var ContributorView = Backbone.View.extend({
+        tagName : "li",
+        render : function() {
+            
+           var contributor = { avatar_url : this.model.get("avatar_url"), 
+                               login : this.model.get("login"), 
+                               url : this.model.get("url"),
+                               contributions: this.model.get("contributions")};
+            
+          //console.log("view created");
+            
+          /*
+            var contributorTemplate = '<div class="contributor">' +
+                            '<ul>' +
+                                '<li>' +
+                                '<img class="pic" width="100" src="<%= avatar_url %>">' +
+                                '</li>' +
+                                '<li>' +
+                                    '<p class="blog"><a class="blogurl" href="<%= url %>"><%= login %></a></p>' +
+                                '</li>' +
+                                '<li>' +
+                                    '<p class="contributions"><%= contributions %></p>' +
+                                '</li>' +
+                            '</ul>' + 
+                        '</div>';
+           
+            //var contributorTemplate = $('#contributor-underscore-template').html(); hmmmmm???? 
+                  
+            var rendered_template = _.template(contributorTemplate, contributor);
+            //console.log(rendered_template,contributor);
+            
+            $(this.el).append(rendered_template);
+            */
+
+            
+            
+           return this;
+        }
+        
+    });
+
+    return ContributorModel;
+
+}); 
\ No newline at end of file
diff --git a/examples/modular-backbone/js/views/footer/FooterView.js b/examples/modular-backbone/js/views/footer/FooterView.js
new file mode 100644
index 0000000..ed4412d
--- /dev/null
+++ b/examples/modular-backbone/js/views/footer/FooterView.js
@@ -0,0 +1,42 @@
+define([
+  'jquery',
+  'underscore',
+  'backbone',
+  'models/owner/OwnerModel',
+  'text!templates/footer/footerTemplate.html'
+], function($, _, Backbone, OwnerModel, footerTemplate){
+
+  var FooterView = Backbone.View.extend({
+    el: $("#footer"),
+
+    initialize: function() {
+
+      var that = this;
+      var options = {query: 'thomasdavis'}
+     
+
+      var onDataHandler = function(collection) {
+          that.render();
+      }
+
+      this.model = new OwnerModel(options);
+      this.model.fetch({ success : onDataHandler });
+
+    },
+
+    render: function(){
+
+      var data = {
+        owner: this.model.toJSON(),
+        _: _ 
+      };
+
+      var compiledTemplate = _.template( footerTemplate, data );
+      this.$el.html(compiledTemplate);
+    }
+
+  });
+
+  return FooterView;
+  
+});
diff --git a/examples/modular-backbone/js/views/home/HomeView.js b/examples/modular-backbone/js/views/home/HomeView.js
new file mode 100644
index 0000000..6c884f4
--- /dev/null
+++ b/examples/modular-backbone/js/views/home/HomeView.js
@@ -0,0 +1,25 @@
+define([
+  'jquery',
+  'underscore',
+  'backbone',
+  'views/sidebar/SidebarView',
+  'text!templates/home/homeTemplate.html'
+], function($, _, Backbone, SidebarView, homeTemplate){
+
+  var HomeView = Backbone.View.extend({
+    el: $("#page"),
+
+    render: function(){
+      
+      this.$el.html(homeTemplate);
+
+      var sidebarView = new SidebarView();
+      sidebarView.render();
+ 
+    }
+
+  });
+
+  return HomeView;
+  
+});
diff --git a/examples/modular-backbone/js/views/home/main.js b/examples/modular-backbone/js/views/home/main.js
deleted file mode 100644
index 9ccffaf..0000000
--- a/examples/modular-backbone/js/views/home/main.js
+++ /dev/null
@@ -1,15 +0,0 @@
-define([
-  'jquery',
-  'underscore',
-  'backbone',
-  'text!templates/home/main.html'
-], function($, _, Backbone, mainHomeTemplate){
-
-  var MainHomeView = Backbone.View.extend({
-    el: $("#page"),
-    render: function(){
-      this.$el.html(mainHomeTemplate);
-    }
-  });
-  return MainHomeView;
-});
diff --git a/examples/modular-backbone/js/views/projects/ProjectsListView.js b/examples/modular-backbone/js/views/projects/ProjectsListView.js
new file mode 100644
index 0000000..9eedea3
--- /dev/null
+++ b/examples/modular-backbone/js/views/projects/ProjectsListView.js
@@ -0,0 +1,27 @@
+// Filename: views/projects/list
+define([
+  'jquery',
+  'underscore',
+  'backbone',
+  // Pull in the Collection module from above,
+  'models/project/ProjectModel',
+  'collections/projects/ProjectsCollection',
+  'text!templates/projects/projectsListTemplate.html'
+
+], function($, _, Backbone, ProjectModel, ProjectsCollection, projectsListTemplate){
+  var ProjectListView = Backbone.View.extend({
+    el: $("#projects-list"),
+
+    render: function(){
+      
+      var data = {
+        projects: this.collection.models,
+        _: _ 
+      };
+
+      var compiledTemplate = _.template( projectsListTemplate, data );
+      $("#projects-list").html( compiledTemplate ); 
+    }
+  });
+  return ProjectListView;
+});
diff --git a/examples/modular-backbone/js/views/projects/ProjectsView.js b/examples/modular-backbone/js/views/projects/ProjectsView.js
new file mode 100644
index 0000000..64d268c
--- /dev/null
+++ b/examples/modular-backbone/js/views/projects/ProjectsView.js
@@ -0,0 +1,43 @@
+define([
+  'jquery',
+  'underscore',
+  'backbone',
+  'views/sidebar/SidebarView',
+  'models/project/ProjectModel',
+  'collections/projects/ProjectsCollection',
+  'views/projects/ProjectsListView',
+  'text!templates/projects/projectsTemplate.html'
+], function($, _, Backbone, SidebarView, ProjectModel, ProjectsCollection, ProjectsListView, projectsTemplate){
+
+  var ProjectsView = Backbone.View.extend({
+    el: $("#page"),
+    render: function(){
+      
+      this.$el.html(projectsTemplate);
+
+      var project0 = new ProjectModel({title: 'Cross Domain', url: 'https://github.com/thomasdavis/backbonetutorials/tree/gh-pages/examples/cross-domain'}); 
+      var project1 = new ProjectModel({title:'Infinite Scroll', url: 'https://github.com/thomasdavis/backbonetutorials/tree/gh-pages/examples/infinite-scroll'}); 
+      var project2 = new ProjectModel({title:'Modular Backbone', url: 'https://github.com/thomasdavis/backbonetutorials/tree/gh-pages/examples/modular-backbone'}); 
+      var project3 = new ProjectModel({title:'Node MongoDB Mongoose Restify', url: 'https://github.com/thomasdavis/backbonetutorials/tree/gh-pages/examples/nodejs-mongodb-mongoose-restify'});
+      var project4 = new ProjectModel({title:'Todo App', url: 'https://github.com/thomasdavis/backbonetutorials/tree/gh-pages/examples/todo-app'});
+
+      var aProjects = [project0, 
+                      project1,
+                      project2,
+                      project3,
+                      project4];
+
+      var projectsCollection = new ProjectsCollection(aProjects);  
+      var projectsListView = new ProjectsListView({ collection: projectsCollection}); 
+      
+      projectsListView.render(); 
+
+      // add the sidebar 
+      var sidebarView = new SidebarView();
+      sidebarView.render();
+
+    }
+  });
+
+  return ProjectsView;
+});
diff --git a/examples/modular-backbone/js/views/projects/list.js b/examples/modular-backbone/js/views/projects/list.js
deleted file mode 100644
index f0f0179..0000000
--- a/examples/modular-backbone/js/views/projects/list.js
+++ /dev/null
@@ -1,33 +0,0 @@
-// Filename: views/projects/list
-define([
-  'jquery',
-  'underscore',
-  'backbone',
-  // Pull in the Collection module from above
-  'collections/projects',
-  'text!templates/projects/list.html'
-
-], function($, _, Backbone, ProjectsCollection, projectListTemplate){
-  var projectListView = Backbone.View.extend({
-    el: $("#page"),
-    initialize: function(){
-      this.collection = new ProjectsCollection();
-      this.collection.bind("add", this.exampleBind);
-      this.collection = this.collection.add({ name: "Twitter"});
-      this.collection = this.collection.add({ name: "Facebook"});
-      this.collection = this.collection.add({ name: "Myspace", score: 20});
-    },
-    exampleBind: function( model ){
-      //console.log(model);
-    },
-    render: function(){
-      var data = {
-        projects: this.collection.models,
-        _: _ 
-      };
-      var compiledTemplate = _.template( projectListTemplate, data );
-      this.$el.html( compiledTemplate ); 
-    }
-  });
-  return projectListView;
-});
diff --git a/examples/modular-backbone/js/views/sidebar/SidebarView.js b/examples/modular-backbone/js/views/sidebar/SidebarView.js
new file mode 100644
index 0000000..ba6babb
--- /dev/null
+++ b/examples/modular-backbone/js/views/sidebar/SidebarView.js
@@ -0,0 +1,38 @@
+define([
+  'jquery',
+  'underscore',
+  'backbone',
+  'text!templates/sidebar/sidebarTemplate.html'
+], function($, _, Backbone, sidebarTemplate){
+
+  var SidebarView = Backbone.View.extend({
+    el: $(".sidebar"),
+
+    render: function(){
+
+      var that = this;
+
+      var backbone_ad = { site_url : "http://www.backbonejs.org" ,
+                          image_url : "./imgs/backbone_logo.png",
+                          title : "Backbone.js",
+                          description: "Backbone.js gives structure to web applications by providing models with key-value binding and custom events, collections with a rich API of enumerable functions, views with declarative event handling, and connects it all to your existing API over a RESTful JSON interface." };
+
+      var require_ad = {  site_url : "http://www.requirejs.org" ,
+                          image_url : "./imgs/require_logo.png",
+                          title : "Require.js",
+                          description: "RequireJS is a JavaScript file and module loader. It is optimized for in-browser use, but it can be used in other JavaScript environments, like Rhino and Node." };
+
+      var data = {
+        ads: [backbone_ad, require_ad]
+      };
+
+      var compiledTemplate = _.template( sidebarTemplate, data );
+    
+      $(".sidebar").append(compiledTemplate);
+    }
+
+  });
+
+  return SidebarView;
+  
+});
diff --git a/examples/modular-backbone/js/views/users/list.js b/examples/modular-backbone/js/views/users/list.js
deleted file mode 100644
index 4348fa1..0000000
--- a/examples/modular-backbone/js/views/users/list.js
+++ /dev/null
@@ -1,19 +0,0 @@
-// Filename: views/projects/list
-define([
-  'jquery',
-  'underscore',
-  'backbone',
-  'text!templates/users/list.html'
-], function($, _, Backbone, userListTemplate){
-  var UserListView = Backbone.View.extend({
-    el: $("#page"),
-    initialize: function(){
-    },
-    render: function(){
-      var data = {};
-      var compiledTemplate = _.template( userListTemplate, data );
-      this.$el.html( compiledTemplate ); 
-    }
-  });
-  return UserListView;
-});