Remove the task from app and setup collections and a list view.

The el for each one is set when creating their ListViews.
this.render() in each list views initializer function calls the render.

diff --git a/dash/app.js b/dash/app.js
index 7a8c4c7..4282508 100644 (file)
--- a/dash/app.js
+++ b/dash/app.js
@@ -1,64 +1,45 @@
 $(document).ready(function(){
-    // render to the page
-    // Emmet Gov't
-    var task11 = new Task({title: "Main Navigation", project: 1, employee: "Laury", status: "On Hold"});
-    var taskView11 = new TaskView({model: task11});
-    var task12 = new Task({title: "Plugin Req: Uber Menu", project: 1, employee: "Laury", status: "New"});
-    var taskView12 = new TaskView({model: task12});
-    var task13 = new Task({title: "Department Section", project: 1, employee: "Laury", status: "In Progress"});
-    var taskView13 = new TaskView({model: task13});
-    var task14 = new Task({title: "Content Migration", project: 1, employee: "Steve", status: "New"});
-    var taskView14 = new TaskView({model: task14});
-    $('#myList').append(taskView11.render().el);
-    $('#myList').append(taskView12.render().el);
-    $('#myList').append(taskView13.render().el);
+    // Emmet Government
+    var emmetList = new TaskListView({
+        el: '#emmetList',
+        collection: [
+            new Task({title: "Main Navigation", project: 1, employee: "Laury", status: "On Hold"}),
+            new Task({title: "Plugin Req: Uber Menu", project: 1, employee: "Laury", status: "New"}),
+            new Task({title: "Department Section", project: 1, employee: "Laury", status: "In Progress"}),
+            new Task({title: "Content Migration", project: 1, employee: "Steve", status: "New"}),
+    ]});
 
     // Western UP
-    var task21 = new Task({title: "Banner Ads", project: 2, employee: "Steve", status: "New"});
-    var taskView21 = new TaskView({model: task21});
-    var task22 = new Task({title: "Contact Forms MailChimp", project: 2, employee: "Laury", status: "New"});
-    var taskView22 = new TaskView({model: task22});
-    var task23 = new Task({title: "Events", project: 2, employee: "Laury", status: "New"});
-    var taskView23 = new TaskView({model: task23});
-    var task24 = new Task({title: "Members", project: 2, employee: "Laury", status: "New"});
-    var taskView24 = new TaskView({model: task24});
-    var task25 = new Task({title: "Wordress Setup", project: 2, employee: "Laury", status: "New"});
-    var taskView25 = new TaskView({model: task25});
-    var task26 = new Task({title: "Content Migration", project: 2, employee: "Steve", status: "New"});
-    var taskView26 = new TaskView({model: task26});
-    $('#myList2').append(taskView21.render().el);
-    $('#myList2').append(taskView22.render().el);
-    $('#myList2').append(taskView23.render().el);
-    $('#myList2').append(taskView24.render().el);
-    $('#myList2').append(taskView25.render().el);
-    $('#myList2').append(taskView26.render().el);
+    var westernList = new TaskListView({
+        el: '#westernList',
+        collection: [
+            new Task({title: "Banner Ads", project: 2, employee: "Steve", status: "New"}),
+            new Task({title: "Contact Forms MailChimp", project: 2, employee: "Laury", status: "New"}),
+            new Task({title: "Events", project: 2, employee: "Laury", status: "New"}),
+            new Task({title: "Events", project: 2, employee: "Laury", status: "New"}),
+            new Task({title: "Members", project: 2, employee: "Laury", status: "New"}),
+            new Task({title: "Wordress Setup", project: 2, employee: "Laury", status: "New"}),
+            new Task({title: "Content Migration", project: 2, employee: "Steve", status: "New"}),
+    ]});
 
     // NLEA
-    var task31 = new Task({title: "Constant Contact", project: 3, employee: "Steve", status: "New"});
-    var taskView31 = new TaskView({model: task31});
-    var task32 = new Task({title: "Forms", project: 3, employee: "Steve", status: "New"});
-    var taskView32 = new TaskView({model: task32});
-    $('#myList3').append(taskView31.render().el);
-    $('#myList3').append(taskView32.render().el);
+    var nleaList = new TaskListView({
+        el: '#nleaList',
+        collection: [
+            new Task({title: "Constant Contact", project: 3, employee: "Steve", status: "New"}),
+            new Task({title: "Forms", project: 3, employee: "Steve", status: "New"}),
+    ]});
 
     // Mount Pleasant Wow
-    var task41 = new Task({title: "Break Out / Theme", project: 4, employee: "Ian", status: "New"});
-    var taskView41 = new TaskView({model: task41});
-    var task42 = new Task({title: "Forms", project: 4, employee: "Steve", status: "New"});
-    var taskView42 = new TaskView({model: task42});
-    var task43 = new Task({title: "Coupons", project: 4, employee: "Steve", status: "New"});
-    var taskView43 = new TaskView({model: task43});
-    var task44 = new Task({title: "Events", project: 4, employee: "Steve", status: "New"});
-    var taskView44 = new TaskView({model: task44});
-    var task45 = new Task({title: "Members", project: 4, employee: "Steve", status: "New"});
-    var taskView45 = new TaskView({model: task45});
-    var task46 = new Task({title: "Photos/Videos", project: 4, employee: "Steve", status: "New"});
-    var taskView46 = new TaskView({model: task46});
-    $('#myList4').append(taskView41.render().el);
-    $('#myList4').append(taskView42.render().el);
-    $('#myList4').append(taskView43.render().el);
-    $('#myList4').append(taskView44.render().el);
-    $('#myList4').append(taskView45.render().el);
-    $('#myList4').append(taskView46.render().el);
+    var mountList = new TaskListView({
+        el: '#mountList',
+        collection: [
+            new Task({title: "Break Out / Theme", project: 4, employee: "Ian", status: "New"}),
+            new Task({title: "Forms", project: 4, employee: "Steve", status: "New"}),
+            new Task({title: "Coupons", project: 4, employee: "Steve", status: "New"}),
+            new Task({title: "Events", project: 4, employee: "Steve", status: "New"}),
+            new Task({title: "Members", project: 4, employee: "Steve", status: "New"}),
+            new Task({title: "Photos/Videos", project: 4, employee: "Steve", status: "New"}),
+    ]});
 
 });

diff --git a/dash/views/taskList.js b/dash/views/taskList.js
index 13e181c..36854c6 100644 (file)
--- a/dash/views/taskList.js
+++ b/dash/views/taskList.js
@@ -1,11 +1,17 @@
 var TaskListView = Backbone.View.extend({
     el: '#myList',
     tagName: 'section',
+    initialize: function(){
+        this.render();
+    },
+    setEl: function(myEl){
+        this.el = myEl;
+    },
     render: function(){
         var taskView = this.collection.map(function(task){
             return (new TaskView({model: task})).render().el;
         });
-        this.$el.html(taskView);
+        this.$el.append(taskView);
         return this;
     }
 });

diff --git a/index.html b/index.html
index c1a111b..be3768f 100644 (file)
--- a/index.html
+++ b/index.html
@@ -38,7 +38,7 @@
             <div class="row">
                 <div class="col-xs-12 col-sm-6 col-md-4 col-lg-4">
                     <h3>NLEA</h3>
-                    <table id="myList3"
+                    <table id="nleaList"
                         class="table table-condensed table-striped table-bordered table-hover">
                         <thead>
                             <tr>
@@ -51,7 +51,7 @@
                 </div>
                 <div class="col-xs-12 col-sm-6 col-md-4 col-lg-4">
                     <h3>Emmet - Gov't</h3>
-                    <table id="myList"
+                    <table id="emmetList"
                         class="table table-condensed table-striped table-bordered table-hover">
                         <thead>
                             <tr>
@@ -64,7 +64,7 @@
                 </div>
                 <div class="col-xs-12 col-sm-6 col-md-4 col-lg-4">
                     <h3>Western UP</h3>
-                    <table id="myList2"
+                    <table id="westernList"
                         class="table table-condensed table-striped table-bordered table-hover">
                         <thead>
                             <tr>
@@ -77,7 +77,7 @@
                 </div>
                 <div class="col-xs-12 col-sm-6 col-md-4 col-lg-4">
                     <h3>Mount Pleasant Wow</h3>
-                    <table id="myList4"
+                    <table id="mountList"
                         class="table table-condensed table-striped table-bordered table-hover">
                         <thead>
                             <tr>