From ecd6d4a7a7c7e4395570639d919f241894b14fcb Mon Sep 17 00:00:00 2001
From: Jessica <jchung722@gmail.com>
Date: Wed, 30 Nov 2016 11:05:05 -0800
Subject: [PATCH 1/9] omg wave 1

---
 build/index.html              |  6 +++---
 src/app.js                    | 28 ++++++++++++++++++++++++----
 src/app/models/application.js |  2 +-
 src/app/models/contact.js     |  9 +++++++++
 src/app/views/contact_view.js | 16 ++++++++++++++++
 5 files changed, 53 insertions(+), 8 deletions(-)

diff --git a/build/index.html b/build/index.html
index 1c01ae4..4f9a953 100644
--- a/build/index.html
+++ b/build/index.html
@@ -48,9 +48,9 @@ <h4><%- name %></h4>
     </script>
 
     <script type="text/template" id="tmpl-contact-details">
-      <h3><%- name %></h3>
-      <h4><%- email %></h4>
-      <h4><%- phone %></h4>
+      <h3><%- contact.name %></h3>
+      <h4><%- contact.email %></h4>
+      <h4><%- contact.phone %></h4>
     </script>
 
     <!-- Entire JS project built by Webpack -->
diff --git a/src/app.js b/src/app.js
index cc87655..5e1f9f9 100644
--- a/src/app.js
+++ b/src/app.js
@@ -1,9 +1,29 @@
+import $ from 'jquery';
+import _ from 'underscore';
+import Backbone from 'backbone';
 import Application from 'app/models/application';
+import Contact from 'app/models/contact';
 import ApplicationView from 'app/views/application_view';
+import ContactView from 'app/views/contact_view';
 
-var application = new Application();
+var contactData = [
+  {
+    name: 'Jane',
+    phone: '123-4567',
+    email: 'Janedoe2@gmail.com'
+  }
+];
 
-var appView = new ApplicationView({
-  el: '#application',
-  model: application
+$(document).ready(function() {
+  var contact = new Contact(contactData[0]);
+  var contactTemplate = _.template($('#tmpl-contact-details').html());
+  // var application = new Application(contactData);
+
+  var contactView = new ContactView({
+    el: $('#contact-details'),
+    model: contact,
+    template: contactTemplate
+  });
+
+  contactView.render();
 });
diff --git a/src/app/models/application.js b/src/app/models/application.js
index 45c60fe..de24ccd 100644
--- a/src/app/models/application.js
+++ b/src/app/models/application.js
@@ -1,7 +1,7 @@
 import Backbone from 'backbone';
 
 const Application = Backbone.Model.extend({
-  // This model represents the overall application.
+
 });
 
 export default Application;
diff --git a/src/app/models/contact.js b/src/app/models/contact.js
index 395f247..801166d 100644
--- a/src/app/models/contact.js
+++ b/src/app/models/contact.js
@@ -3,6 +3,15 @@ import Backbone from 'backbone';
 const Contact = Backbone.Model.extend({
   // This model should have the attributes for
   // a single contact: name, phone number, and email.
+  defaults: {
+    name: "Jane",
+    phone: "123-4567",
+    email: "Janedoe@gmail.com"
+  },
+
+  initialize: function(){
+    console.log("Contact Created for" + this.get("name"));
+  }
 });
 
 export default Contact;
diff --git a/src/app/views/contact_view.js b/src/app/views/contact_view.js
index 2d76cc9..34d734a 100644
--- a/src/app/views/contact_view.js
+++ b/src/app/views/contact_view.js
@@ -1,6 +1,22 @@
+import $ from 'jquery';
+import _ from 'underscore';
 import Backbone from 'backbone';
+import Contact from 'app/models/contact';
 
 const ContactView = Backbone.View.extend({
+  initialize: function(options) {
+    this.template = options.template;
+  },
+
+  render: function() {
+    console.log(this.template);
+    var html = this.template({contact: this.model.attributes});
+    this.$el.html(html);
+    console.log(this.model);
+
+    // Enable chained calls
+    return this;
+  }
 });
 
 export default ContactView;

From 217d44c34baa6342a703add508ec13ae4acdd64c Mon Sep 17 00:00:00 2001
From: Jessica <jchung722@gmail.com>
Date: Wed, 30 Nov 2016 16:05:37 -0800
Subject: [PATCH 2/9] make rolodex collection

---
 build/index.html                  |  6 +++---
 src/app.js                        | 23 +++++++++++------------
 src/app/collections/rolodex.js    |  2 ++
 src/app/views/application_view.js | 26 ++++++++++++++++++++++++--
 src/app/views/contact_view.js     |  4 +---
 src/app/views/rolodex_view.js     | 16 ++++++++++++++++
 6 files changed, 57 insertions(+), 20 deletions(-)

diff --git a/build/index.html b/build/index.html
index 4f9a953..1c01ae4 100644
--- a/build/index.html
+++ b/build/index.html
@@ -48,9 +48,9 @@ <h4><%- name %></h4>
     </script>
 
     <script type="text/template" id="tmpl-contact-details">
-      <h3><%- contact.name %></h3>
-      <h4><%- contact.email %></h4>
-      <h4><%- contact.phone %></h4>
+      <h3><%- name %></h3>
+      <h4><%- email %></h4>
+      <h4><%- phone %></h4>
     </script>
 
     <!-- Entire JS project built by Webpack -->
diff --git a/src/app.js b/src/app.js
index 5e1f9f9..d9a3342 100644
--- a/src/app.js
+++ b/src/app.js
@@ -1,29 +1,28 @@
 import $ from 'jquery';
 import _ from 'underscore';
 import Backbone from 'backbone';
-import Application from 'app/models/application';
-import Contact from 'app/models/contact';
+import Rolodex from 'app/collections/rolodex';
 import ApplicationView from 'app/views/application_view';
-import ContactView from 'app/views/contact_view';
 
 var contactData = [
   {
     name: 'Jane',
     phone: '123-4567',
     email: 'Janedoe2@gmail.com'
+  },
+  {
+    name: 'John',
+    phone: '369-2468',
+    email: 'Johndoe@gmail.com'
   }
 ];
 
 $(document).ready(function() {
-  var contact = new Contact(contactData[0]);
-  var contactTemplate = _.template($('#tmpl-contact-details').html());
   // var application = new Application(contactData);
-
-  var contactView = new ContactView({
-    el: $('#contact-details'),
-    model: contact,
-    template: contactTemplate
+  var rolodex = new Rolodex(contactData);
+  var application = new ApplicationView({
+    el: $('#application'),
+    model: rolodex
   });
-
-  contactView.render();
+  application.render();
 });
diff --git a/src/app/collections/rolodex.js b/src/app/collections/rolodex.js
index cc11371..9bff7ee 100644
--- a/src/app/collections/rolodex.js
+++ b/src/app/collections/rolodex.js
@@ -1,10 +1,12 @@
 import Backbone from 'backbone';
+import Contact from 'app/models/contact';
 
 const Rolodex = Backbone.Collection.extend({
   // This Rolodex represents a collection of Contacts
   // and should include any methods or attributes
   // that are involved in working with more than one
   // Contact.
+  model: Contact
 });
 
 export default Rolodex;
diff --git a/src/app/views/application_view.js b/src/app/views/application_view.js
index 8d3b235..63325be 100644
--- a/src/app/views/application_view.js
+++ b/src/app/views/application_view.js
@@ -1,11 +1,33 @@
+import $ from 'jquery';
+import _ from 'underscore';
 import Backbone from 'backbone';
+import Contact from 'app/models/contact';
 
 const ApplicationView = Backbone.View.extend({
-  initialize: function() {
-    this.render();
+  initialize: function(options) {
+    this.contactData = options.contactData;
+    this.contactTemplate = _.template($('#tmpl-contact-details').html());
+    this.rolodexTemplate = _.template($('#tmpl-contact-card').html());
+
   },
 
   render: function() {
+    var contactView = new ContactView({
+      el: $('#contact-details'),
+      model: contact,
+      template: this.contactTemplate
+    });
+
+    contactView.render();
+    // var application = new Application(contactData);
+    var applicationView = new RolodexView({
+      el: $('#contact-cards'),
+      contactData: contactData,
+      template: this.rolodexTemplate
+    });
+
+    rolodexView.render();
+
     return this;
   }
 });
diff --git a/src/app/views/contact_view.js b/src/app/views/contact_view.js
index 34d734a..eeb4e7f 100644
--- a/src/app/views/contact_view.js
+++ b/src/app/views/contact_view.js
@@ -9,10 +9,8 @@ const ContactView = Backbone.View.extend({
   },
 
   render: function() {
-    console.log(this.template);
-    var html = this.template({contact: this.model.attributes});
+    var html = this.template(this.model.attributes);
     this.$el.html(html);
-    console.log(this.model);
 
     // Enable chained calls
     return this;
diff --git a/src/app/views/rolodex_view.js b/src/app/views/rolodex_view.js
index 128988a..c4984aa 100644
--- a/src/app/views/rolodex_view.js
+++ b/src/app/views/rolodex_view.js
@@ -1,6 +1,22 @@
+import $ from 'jquery';
+import _ from 'underscore';
 import Backbone from 'backbone';
+import Contact from 'app/models/contact';
 
 const RolodexView = Backbone.View.extend({
+  initialize: function(options){
+    this.template = options.template;
+
+  },
+
+  render: function() {
+    var html = this.template(this.model.attributes);
+    this.$el.html(html);
+
+    // Enable chained calls
+    return this;
+  }
+
 });
 
 export default RolodexView;

From de7863ae8f2cc8ae82a157d29d6cd3071d4feaac Mon Sep 17 00:00:00 2001
From: Jessica <jchung722@gmail.com>
Date: Wed, 30 Nov 2016 16:40:34 -0800
Subject: [PATCH 3/9] wave 2: add contact cards

---
 src/app/views/application_view.js | 39 ++++++++++++++++++++-----------
 src/app/views/rolodex_view.js     |  2 +-
 2 files changed, 27 insertions(+), 14 deletions(-)

diff --git a/src/app/views/application_view.js b/src/app/views/application_view.js
index 63325be..0427164 100644
--- a/src/app/views/application_view.js
+++ b/src/app/views/application_view.js
@@ -1,34 +1,47 @@
 import $ from 'jquery';
 import _ from 'underscore';
 import Backbone from 'backbone';
+import Rolodex from 'app/collections/rolodex';
 import Contact from 'app/models/contact';
+import RolodexView from 'app/views/rolodex_view';
 
 const ApplicationView = Backbone.View.extend({
   initialize: function(options) {
     this.contactData = options.contactData;
     this.contactTemplate = _.template($('#tmpl-contact-details').html());
     this.rolodexTemplate = _.template($('#tmpl-contact-card').html());
+    this.cardList = [];
+
+    this.model.forEach(function(contact) {
+      this.addContact(contact);
+    }, this);
 
   },
 
   render: function() {
-    var contactView = new ContactView({
-      el: $('#contact-details'),
-      model: contact,
-      template: this.contactTemplate
-    });
+    // var contactView = new ContactView({
+    //   el: $('#contact-details'),
+    //   model: contact,
+    //   template: this.contactTemplate
+    // });
+    //
+    // contactView.render();
 
-    contactView.render();
-    // var application = new Application(contactData);
-    var applicationView = new RolodexView({
-      el: $('#contact-cards'),
-      contactData: contactData,
-      template: this.rolodexTemplate
-    });
+    this.cardList.forEach(function(card) {
+      card.render();
 
-    rolodexView.render();
+    }, this);
 
     return this;
+  },
+
+  addContact: function(contact){
+    var card = new RolodexView({
+      el: $('#contact-cards'),
+      model: contact,
+      template: this.rolodexTemplate
+    });
+    this.cardList.push(card);
   }
 });
 
diff --git a/src/app/views/rolodex_view.js b/src/app/views/rolodex_view.js
index c4984aa..f75a673 100644
--- a/src/app/views/rolodex_view.js
+++ b/src/app/views/rolodex_view.js
@@ -11,7 +11,7 @@ const RolodexView = Backbone.View.extend({
 
   render: function() {
     var html = this.template(this.model.attributes);
-    this.$el.html(html);
+    this.$el.append(html);
 
     // Enable chained calls
     return this;

From b0c56a802522b0857604e7f2c090f4a12d963f56 Mon Sep 17 00:00:00 2001
From: Jessica <jchung722@gmail.com>
Date: Thu, 1 Dec 2016 13:48:15 -0800
Subject: [PATCH 4/9] yay you can add contact :D

---
 build/index.html                  | 34 +++++++++++++------------
 src/app/views/application_view.js | 41 +++++++++++++++++++++++++++++--
 2 files changed, 57 insertions(+), 18 deletions(-)

diff --git a/build/index.html b/build/index.html
index 1c01ae4..5ce6c93 100644
--- a/build/index.html
+++ b/build/index.html
@@ -15,22 +15,24 @@
         <h1>Rolodex</h1>
         <section class="row contact-form">
           <h3>Add A New Contact</h3>
-          <div class="columns">
-            <label>
-              Name
-              <input type="text" name="name">
-            </label>
-            <label>
-              Email
-              <input type="text" name="email">
-            </label>
-            <label>
-              Phone
-              <input type="text" name="phone">
-            </label>
-            <h3 class="button btn-save">Save</h3>
-            <h3 class="button btn-cancel">Cancel</h3>
-          </div>
+            <!-- <form class="new-contact"> -->
+              <div class="columns">
+                <label>
+                  Name
+                  <input type="text" name="name">
+                </label>
+                <label>
+                  Email
+                  <input type="text" name="email">
+                </label>
+                <label>
+                  Phone
+                  <input type="text" name="phone">
+                </label>
+                <h3 type= "submit" class="button btn-save">Save</h3>
+                <h3 type= "button" class="button btn-cancel">Cancel</h3>
+              </div>
+          <!-- </form> -->
         </section>
       </header>
 
diff --git a/src/app/views/application_view.js b/src/app/views/application_view.js
index 0427164..1c3c7bb 100644
--- a/src/app/views/application_view.js
+++ b/src/app/views/application_view.js
@@ -7,15 +7,25 @@ import RolodexView from 'app/views/rolodex_view';
 
 const ApplicationView = Backbone.View.extend({
   initialize: function(options) {
-    this.contactData = options.contactData;
     this.contactTemplate = _.template($('#tmpl-contact-details').html());
     this.rolodexTemplate = _.template($('#tmpl-contact-card').html());
     this.cardList = [];
+    this.modelList = [];
+
+    this.input = {
+      name: this.$('.contact-form input[name="name"]'),
+      email: this.$('.contact-form input[name="email"]'),
+      phone: this.$('.contact-form input[name="phone"]')
+    };
 
     this.model.forEach(function(contact) {
       this.addContact(contact);
     }, this);
 
+    this.listenTo(this.model, "update", this.render);
+
+    this.listenTo(this.model, "add", this.addContact);
+
   },
 
   render: function() {
@@ -27,6 +37,8 @@ const ApplicationView = Backbone.View.extend({
     //
     // contactView.render();
 
+    $('#contact-cards').empty();
+
     this.cardList.forEach(function(card) {
       card.render();
 
@@ -35,7 +47,32 @@ const ApplicationView = Backbone.View.extend({
     return this;
   },
 
-  addContact: function(contact){
+  events: {
+    'click .btn-save': 'saveInput',
+    'click .btn-cancel': 'clearInput'
+  },
+
+  clearInput: function(event) {
+    $('input').val('');
+  },
+
+  saveInput: function(event) {
+
+    event.preventDefault();
+
+    var contact = new Contact({
+      name: this.input.name.val(),
+      phone: this.input.phone.val(),
+      email: this.input.email.val()
+    });
+
+    this.model.add(contact);
+
+    this.clearInput();
+
+  },
+
+  addContact: function(contact) {
     var card = new RolodexView({
       el: $('#contact-cards'),
       model: contact,

From 8330f5a398d772f0ea3f13b33972a0d5eb2027bc Mon Sep 17 00:00:00 2001
From: Jessica <jchung722@gmail.com>
Date: Thu, 1 Dec 2016 20:51:32 -0800
Subject: [PATCH 5/9] basic requirements met

---
 build/index.html                  |  2 --
 src/app.js                        | 25 +++++++++++---
 src/app/views/application_view.js | 56 +++++++------------------------
 src/app/views/contact_view.js     | 23 ++++++++++---
 src/app/views/rolodex_view.js     | 34 ++++++++++++++++---
 5 files changed, 81 insertions(+), 59 deletions(-)

diff --git a/build/index.html b/build/index.html
index 5ce6c93..c90b697 100644
--- a/build/index.html
+++ b/build/index.html
@@ -15,7 +15,6 @@
         <h1>Rolodex</h1>
         <section class="row contact-form">
           <h3>Add A New Contact</h3>
-            <!-- <form class="new-contact"> -->
               <div class="columns">
                 <label>
                   Name
@@ -32,7 +31,6 @@ <h3>Add A New Contact</h3>
                 <h3 type= "submit" class="button btn-save">Save</h3>
                 <h3 type= "button" class="button btn-cancel">Cancel</h3>
               </div>
-          <!-- </form> -->
         </section>
       </header>
 
diff --git a/src/app.js b/src/app.js
index d9a3342..8282ddf 100644
--- a/src/app.js
+++ b/src/app.js
@@ -4,6 +4,7 @@ import Backbone from 'backbone';
 import Rolodex from 'app/collections/rolodex';
 import ApplicationView from 'app/views/application_view';
 
+// some data to start with
 var contactData = [
   {
     name: 'Jane',
@@ -18,11 +19,25 @@ var contactData = [
 ];
 
 $(document).ready(function() {
-  // var application = new Application(contactData);
-  var rolodex = new Rolodex(contactData);
+
+  var rolodex = new Rolodex(contactData); //create new collection that takes in starter data
+
+  $("#contact-details").hide(); //make sure that the modal is hidden by default
+
   var application = new ApplicationView({
-    el: $('#application'),
-    model: rolodex
+    el: $('#application'), //element is the application div inside bodys; seems like I need this even though this.$el is not called in application_view??o_O
+    model: rolodex //pass collection of models to applicationview
   });
-  application.render();
+  application.render(); //render the application view
+});
+
+$(document).mouseup(function (e)
+{
+    var container = $("#contact-details");
+
+    if (!container.is(e.target) // if the target of the click isn't the container...
+        && container.has(e.target).length === 0) // ... nor a descendant of the container
+    {
+        container.hide();
+    }
 });
diff --git a/src/app/views/application_view.js b/src/app/views/application_view.js
index 1c3c7bb..810ed15 100644
--- a/src/app/views/application_view.js
+++ b/src/app/views/application_view.js
@@ -1,85 +1,55 @@
 import $ from 'jquery';
 import _ from 'underscore';
 import Backbone from 'backbone';
-import Rolodex from 'app/collections/rolodex';
 import Contact from 'app/models/contact';
 import RolodexView from 'app/views/rolodex_view';
 
 const ApplicationView = Backbone.View.extend({
-  initialize: function(options) {
-    this.contactTemplate = _.template($('#tmpl-contact-details').html());
-    this.rolodexTemplate = _.template($('#tmpl-contact-card').html());
-    this.cardList = [];
-    this.modelList = [];
-
+  initialize: function() {
+    //create object which holds selectors for specific inputs in index.html
     this.input = {
       name: this.$('.contact-form input[name="name"]'),
       email: this.$('.contact-form input[name="email"]'),
       phone: this.$('.contact-form input[name="phone"]')
     };
 
-    this.model.forEach(function(contact) {
-      this.addContact(contact);
-    }, this);
-
-    this.listenTo(this.model, "update", this.render);
-
-    this.listenTo(this.model, "add", this.addContact);
-
   },
 
   render: function() {
-    // var contactView = new ContactView({
-    //   el: $('#contact-details'),
-    //   model: contact,
-    //   template: this.contactTemplate
-    // });
-    //
-    // contactView.render();
-
-    $('#contact-cards').empty();
-
-    this.cardList.forEach(function(card) {
-      card.render();
-
-    }, this);
+    //render RolodexView and pass in collection of models made in app.js
+    var rolodexView = new RolodexView({
+      model: this.model,
+    });
+    rolodexView.render();
 
     return this;
   },
 
   events: {
     'click .btn-save': 'saveInput',
-    'click .btn-cancel': 'clearInput'
+    'click .btn-cancel': 'clearInput',
   },
 
   clearInput: function(event) {
-    $('input').val('');
+    $('input').val('');//clear all values in any input tags
   },
 
   saveInput: function(event) {
 
-    event.preventDefault();
+    // event.preventDefault(); <---I had this here before, but I guess it isn't needed since inputs are not in a form, and therefore the page won't refresh?
 
-    var contact = new Contact({
+    var contact = new Contact({ //create new instance in model of contact passing in values in input fields.
       name: this.input.name.val(),
       phone: this.input.phone.val(),
       email: this.input.email.val()
     });
 
-    this.model.add(contact);
+    this.model.add(contact); //make an add call which model will listenTo and run addContact in rolodexview
 
-    this.clearInput();
+    this.clearInput(); //clear input fields
 
   },
 
-  addContact: function(contact) {
-    var card = new RolodexView({
-      el: $('#contact-cards'),
-      model: contact,
-      template: this.rolodexTemplate
-    });
-    this.cardList.push(card);
-  }
 });
 
 export default ApplicationView;
diff --git a/src/app/views/contact_view.js b/src/app/views/contact_view.js
index eeb4e7f..40ecc2c 100644
--- a/src/app/views/contact_view.js
+++ b/src/app/views/contact_view.js
@@ -5,16 +5,31 @@ import Contact from 'app/models/contact';
 
 const ContactView = Backbone.View.extend({
   initialize: function(options) {
-    this.template = options.template;
+    this.template = options.template; //rolodex template passed from rolodexview
+    this.contactTemplate = _.template($('#tmpl-contact-details').html()); //script template for contact details
   },
 
   render: function() {
-    var html = this.template(this.model.attributes);
-    this.$el.html(html);
+
+    var html = this.template(this.model.attributes); //pass model attributes to template
+    this.$el.html(html); //creates div tag with above html elements inside
 
     // Enable chained calls
     return this;
-  }
+  },
+
+  events: {
+    'click .contact-card': 'getDetail'
+  },
+
+  getDetail: function(event){
+
+    $('#contact-details').show(); //default hidden modal will show!
+
+    var html = this.contactTemplate(this.model.attributes); //pass model attributes to contact details template
+    $('#contact-details').html(html);//replaces html elements with new html elements with model attributes above
+  },
+
 });
 
 export default ContactView;
diff --git a/src/app/views/rolodex_view.js b/src/app/views/rolodex_view.js
index f75a673..7174dd3 100644
--- a/src/app/views/rolodex_view.js
+++ b/src/app/views/rolodex_view.js
@@ -1,20 +1,44 @@
 import $ from 'jquery';
 import _ from 'underscore';
 import Backbone from 'backbone';
-import Contact from 'app/models/contact';
+import ContactView from 'app/views/contact_view';
 
 const RolodexView = Backbone.View.extend({
-  initialize: function(options){
-    this.template = options.template;
+  initialize: function(){
+    this.rolodexTemplate = _.template($('#tmpl-contact-card').html());//template provided in script tag in index.html
+    this.cardList = [];//create empty array variable.
+
+    //loop through collection of models and add contacts to cardList
+    this.model.forEach(function(contact) {
+      this.addContact(contact);
+    }, this);
+
+    this.listenTo(this.model, "update", this.render);
+
+    this.listenTo(this.model, "add", this.addContact);
 
   },
 
   render: function() {
-    var html = this.template(this.model.attributes);
-    this.$el.append(html);
+    // $('#contact-cards').empty(); <----things were weird when I ran this. Still not sure why this is unneccessary. Is it because of the listenTo update above?
+    //loops through cardList and appends each card to correct tag in index.html
+    this.cardList.forEach(function(card) {
+      card.render();
+
+      $('#contact-cards').append(card.$el);//.$el adds the div tag since $el was not specified (see below)
+    }, this);
 
     // Enable chained calls
     return this;
+  },
+
+  addContact: function(contact) {
+    var card = new ContactView({
+      // el: $('#contact-cards'), <---still unsure why when el was specified (and direct li objects were added to ul tag), .contact-card tags could not be clicked independently
+      model: contact, //contacts created with each individual model passed through
+      template: this.rolodexTemplate //pass through rolodex template
+    });
+    this.cardList.push(card); //add each contact view to cardlist matrix
   }
 
 });

From 6bb781690bdf77195f65035ab59931d656ff9c6c Mon Sep 17 00:00:00 2001
From: Jessica <jchung722@gmail.com>
Date: Fri, 2 Dec 2016 11:04:40 -0800
Subject: [PATCH 6/9] edit button

---
 build/index.html | 1 +
 1 file changed, 1 insertion(+)

diff --git a/build/index.html b/build/index.html
index c90b697..d06bd16 100644
--- a/build/index.html
+++ b/build/index.html
@@ -51,6 +51,7 @@ <h4><%- name %></h4>
       <h3><%- name %></h3>
       <h4><%- email %></h4>
       <h4><%- phone %></h4>
+      <button class="button">Edit</button>
     </script>
 
     <!-- Entire JS project built by Webpack -->

From d90aef5e39d6595b8306cb4d26abea7d2183e6cc Mon Sep 17 00:00:00 2001
From: Jessica <jchung722@gmail.com>
Date: Fri, 2 Dec 2016 15:30:41 -0800
Subject: [PATCH 7/9] had to add another view but delete works yesssss

---
 build/index.html                     |  3 ++-
 src/app/views/application_view.js    |  8 ++++++
 src/app/views/contact_detail_view.js | 39 ++++++++++++++++++++++++++++
 src/app/views/contact_view.js        | 31 ++++++++++++++++------
 src/app/views/rolodex_view.js        | 26 +++++++++++++++----
 5 files changed, 93 insertions(+), 14 deletions(-)
 create mode 100644 src/app/views/contact_detail_view.js

diff --git a/build/index.html b/build/index.html
index d06bd16..575c3ab 100644
--- a/build/index.html
+++ b/build/index.html
@@ -51,7 +51,8 @@ <h4><%- name %></h4>
       <h3><%- name %></h3>
       <h4><%- email %></h4>
       <h4><%- phone %></h4>
-      <button class="button">Edit</button>
+      <button class="edit button">Edit</button>
+      <button class="delete button">Delete</button>
     </script>
 
     <!-- Entire JS project built by Webpack -->
diff --git a/src/app/views/application_view.js b/src/app/views/application_view.js
index 810ed15..898dad6 100644
--- a/src/app/views/application_view.js
+++ b/src/app/views/application_view.js
@@ -19,6 +19,8 @@ const ApplicationView = Backbone.View.extend({
     //render RolodexView and pass in collection of models made in app.js
     var rolodexView = new RolodexView({
       model: this.model,
+      input: this.input,
+      el: $('main')
     });
     rolodexView.render();
 
@@ -28,8 +30,14 @@ const ApplicationView = Backbone.View.extend({
   events: {
     'click .btn-save': 'saveInput',
     'click .btn-cancel': 'clearInput',
+    // 'click .edit': 'editDetail'
   },
 
+  // editDetail: function(event){
+  //   console.log('ugh');
+  //   this.trigger("editMe", this.model);
+  // },
+
   clearInput: function(event) {
     $('input').val('');//clear all values in any input tags
   },
diff --git a/src/app/views/contact_detail_view.js b/src/app/views/contact_detail_view.js
new file mode 100644
index 0000000..d029574
--- /dev/null
+++ b/src/app/views/contact_detail_view.js
@@ -0,0 +1,39 @@
+import $ from 'jquery';
+import _ from 'underscore';
+import Backbone from 'backbone';
+import Contact from 'app/models/contact';
+
+const ContactDetailView = Backbone.View.extend({
+
+  initialize: function() {
+    this.contactTemplate = _.template($('#tmpl-contact-details').html()); //script template for contact details
+  },
+
+  render: function() {
+    this.$el.show(); //default hidden modal will show
+    var html = this.contactTemplate(this.model.attributes); //pass model attributes to template
+    this.$el.html(html); //creates div tag with above html elements inside
+    // Enable chained calls
+    return this;
+  },
+
+  events: {
+    'click .edit': 'editDetail',
+    'click .delete': 'deleteContact'
+  },
+  //send trigger to rolodexview!
+  editDetail: function(event){
+    console.log('whyyy');
+    this.trigger("editMe", this.model);
+    this.$el.hide();
+  },
+ //delete the model!!
+  deleteContact: function(event){
+    console.log('hi');
+    this.model.destroy();
+    this.$el.hide();
+  }
+
+});
+
+export default ContactDetailView;
diff --git a/src/app/views/contact_view.js b/src/app/views/contact_view.js
index 40ecc2c..a6124aa 100644
--- a/src/app/views/contact_view.js
+++ b/src/app/views/contact_view.js
@@ -2,16 +2,20 @@ import $ from 'jquery';
 import _ from 'underscore';
 import Backbone from 'backbone';
 import Contact from 'app/models/contact';
+import ContactDetailView from 'app/views/contact_detail_view';
 
 const ContactView = Backbone.View.extend({
+
   initialize: function(options) {
-    this.template = options.template; //rolodex template passed from rolodexview
+    this.rolodexTemplate = _.template($('#tmpl-contact-card').html());//template provided in script tag in index.html
     this.contactTemplate = _.template($('#tmpl-contact-details').html()); //script template for contact details
+    this.input = options.input;
+    this.collection = options.collection;
   },
 
   render: function() {
-
-    var html = this.template(this.model.attributes); //pass model attributes to template
+    this.delegateEvents();//bind events after they are emptied in rolodexview element
+    var html = this.rolodexTemplate(this.model.attributes); //pass model attributes to template
     this.$el.html(html); //creates div tag with above html elements inside
 
     // Enable chained calls
@@ -19,16 +23,27 @@ const ContactView = Backbone.View.extend({
   },
 
   events: {
-    'click .contact-card': 'getDetail'
+    'click .contact-card': 'getDetail',
   },
 
   getDetail: function(event){
+    $('#contact-details').empty();
+    var cardDetail = new ContactDetailView({
+      el: $('#contact-details'),
+      model: this.model
+    });
+    this.listenTo(cardDetail, "editMe", this.editCard);
+    cardDetail.render();
+  },
 
-    $('#contact-details').show(); //default hidden modal will show!
+  editCard: function(cardModel) {
+  console.log("Editing a card");
 
-    var html = this.contactTemplate(this.model.attributes); //pass model attributes to contact details template
-    $('#contact-details').html(html);//replaces html elements with new html elements with model attributes above
-  },
+  this.input.name.val(cardModel.get("name"));
+  this.input.email.val(cardModel.get("email"));
+  this.input.phone.val(cardModel.get("phone"));
+  this.collection.remove(cardModel);
+},
 
 });
 
diff --git a/src/app/views/rolodex_view.js b/src/app/views/rolodex_view.js
index 7174dd3..2895941 100644
--- a/src/app/views/rolodex_view.js
+++ b/src/app/views/rolodex_view.js
@@ -4,8 +4,9 @@ import Backbone from 'backbone';
 import ContactView from 'app/views/contact_view';
 
 const RolodexView = Backbone.View.extend({
-  initialize: function(){
-    this.rolodexTemplate = _.template($('#tmpl-contact-card').html());//template provided in script tag in index.html
+  initialize: function(options){
+    this.input = options.input;
+
     this.cardList = [];//create empty array variable.
 
     //loop through collection of models and add contacts to cardList
@@ -17,15 +18,17 @@ const RolodexView = Backbone.View.extend({
 
     this.listenTo(this.model, "add", this.addContact);
 
+    this.listenTo(this.model, "remove", this.removeContact);
+
   },
 
   render: function() {
+    $('#contact-cards').empty();//empties every time rerendered; elements are bound in contact-vew
     // $('#contact-cards').empty(); <----things were weird when I ran this. Still not sure why this is unneccessary. Is it because of the listenTo update above?
     //loops through cardList and appends each card to correct tag in index.html
     this.cardList.forEach(function(card) {
       card.render();
-
-      $('#contact-cards').append(card.$el);//.$el adds the div tag since $el was not specified (see below)
+      $('#contact-cards').append(card.$el);
     }, this);
 
     // Enable chained calls
@@ -36,9 +39,22 @@ const RolodexView = Backbone.View.extend({
     var card = new ContactView({
       // el: $('#contact-cards'), <---still unsure why when el was specified (and direct li objects were added to ul tag), .contact-card tags could not be clicked independently
       model: contact, //contacts created with each individual model passed through
-      template: this.rolodexTemplate //pass through rolodex template
+      input: this.input,
+      collection: this.model
     });
     this.cardList.push(card); //add each contact view to cardlist matrix
+  },
+
+  removeContact: function(model, collection, options) {
+    var filteredList = [];
+    for(var i = 0; i < this.cardList.length; i++) {
+      if(this.cardList[i].model == model) {
+        console.log("Found the bugger!");
+      } else {
+        filteredList.push(this.cardList[i]);
+      }
+    }
+    this.cardList = filteredList;
   }
 
 });

From 8e642c2a6e76520a8a5f482c1355258962271cd3 Mon Sep 17 00:00:00 2001
From: Jessica <jchung722@gmail.com>
Date: Sat, 3 Dec 2016 19:48:34 -0800
Subject: [PATCH 8/9] edit and delete working properly

---
 src/app/views/contact_detail_view.js | 11 ++++++-----
 src/app/views/contact_view.js        | 20 ++------------------
 src/app/views/rolodex_view.js        | 23 +++++++++++++++++++++++
 3 files changed, 31 insertions(+), 23 deletions(-)

diff --git a/src/app/views/contact_detail_view.js b/src/app/views/contact_detail_view.js
index d029574..3db24d0 100644
--- a/src/app/views/contact_detail_view.js
+++ b/src/app/views/contact_detail_view.js
@@ -10,7 +10,8 @@ const ContactDetailView = Backbone.View.extend({
   },
 
   render: function() {
-    this.$el.show(); //default hidden modal will show
+    // this.$el.empty(); //***changed so that no el was assigned (before #contact-details was assigned)
+    // this.$el.show(); //default hidden modal will show
     var html = this.contactTemplate(this.model.attributes); //pass model attributes to template
     this.$el.html(html); //creates div tag with above html elements inside
     // Enable chained calls
@@ -23,15 +24,15 @@ const ContactDetailView = Backbone.View.extend({
   },
   //send trigger to rolodexview!
   editDetail: function(event){
-    console.log('whyyy');
+    // console.log('whyyy');
     this.trigger("editMe", this.model);
-    this.$el.hide();
+    $('#contact-details').hide();
   },
  //delete the model!!
   deleteContact: function(event){
-    console.log('hi');
+    console.log('hi'); //<----this indicator suggests there are ZOMBIES HERE. AHHHHHHHH **resolved :)
     this.model.destroy();
-    this.$el.hide();
+    $('#contact-details').hide();
   }
 
 });
diff --git a/src/app/views/contact_view.js b/src/app/views/contact_view.js
index a6124aa..78b7d4f 100644
--- a/src/app/views/contact_view.js
+++ b/src/app/views/contact_view.js
@@ -2,7 +2,6 @@ import $ from 'jquery';
 import _ from 'underscore';
 import Backbone from 'backbone';
 import Contact from 'app/models/contact';
-import ContactDetailView from 'app/views/contact_detail_view';
 
 const ContactView = Backbone.View.extend({
 
@@ -27,23 +26,8 @@ const ContactView = Backbone.View.extend({
   },
 
   getDetail: function(event){
-    $('#contact-details').empty();
-    var cardDetail = new ContactDetailView({
-      el: $('#contact-details'),
-      model: this.model
-    });
-    this.listenTo(cardDetail, "editMe", this.editCard);
-    cardDetail.render();
-  },
-
-  editCard: function(cardModel) {
-  console.log("Editing a card");
-
-  this.input.name.val(cardModel.get("name"));
-  this.input.email.val(cardModel.get("email"));
-  this.input.phone.val(cardModel.get("phone"));
-  this.collection.remove(cardModel);
-},
+    this.trigger("deetsplz", this.model);
+  }
 
 });
 
diff --git a/src/app/views/rolodex_view.js b/src/app/views/rolodex_view.js
index 2895941..bb423e6 100644
--- a/src/app/views/rolodex_view.js
+++ b/src/app/views/rolodex_view.js
@@ -1,7 +1,9 @@
 import $ from 'jquery';
 import _ from 'underscore';
 import Backbone from 'backbone';
+import Rolodex from 'app/collections/rolodex';
 import ContactView from 'app/views/contact_view';
+import ContactDetailView from 'app/views/contact_detail_view';
 
 const RolodexView = Backbone.View.extend({
   initialize: function(options){
@@ -35,6 +37,26 @@ const RolodexView = Backbone.View.extend({
     return this;
   },
 
+  makeDetail: function(model){
+    $('#contact-details').empty();
+    var cardDetail = new ContactDetailView({
+      model: model
+    });
+    cardDetail.render();
+    this.listenTo(cardDetail, "editMe", this.editCard);
+    $('#contact-details').append(cardDetail.$el);
+    $('#contact-details').show();
+  },
+
+  editCard: function(cardModel) {
+  console.log("Editing a card");
+
+  this.input.name.val(cardModel.get("name"));
+  this.input.email.val(cardModel.get("email"));
+  this.input.phone.val(cardModel.get("phone"));
+  this.model.remove(cardModel);
+},
+
   addContact: function(contact) {
     var card = new ContactView({
       // el: $('#contact-cards'), <---still unsure why when el was specified (and direct li objects were added to ul tag), .contact-card tags could not be clicked independently
@@ -42,6 +64,7 @@ const RolodexView = Backbone.View.extend({
       input: this.input,
       collection: this.model
     });
+    this.listenTo(card, "deetsplz", this.makeDetail);
     this.cardList.push(card); //add each contact view to cardlist matrix
   },
 

From 15e8d16a06bd621aec877fbbc17f58b1aae80008 Mon Sep 17 00:00:00 2001
From: Jessica <jchung722@gmail.com>
Date: Sat, 3 Dec 2016 19:55:20 -0800
Subject: [PATCH 9/9] added comments

---
 src/app/views/application_view.js |  6 ------
 src/app/views/contact_view.js     |  3 ---
 src/app/views/rolodex_view.js     | 14 ++++++--------
 3 files changed, 6 insertions(+), 17 deletions(-)

diff --git a/src/app/views/application_view.js b/src/app/views/application_view.js
index 898dad6..d230bfc 100644
--- a/src/app/views/application_view.js
+++ b/src/app/views/application_view.js
@@ -30,14 +30,8 @@ const ApplicationView = Backbone.View.extend({
   events: {
     'click .btn-save': 'saveInput',
     'click .btn-cancel': 'clearInput',
-    // 'click .edit': 'editDetail'
   },
 
-  // editDetail: function(event){
-  //   console.log('ugh');
-  //   this.trigger("editMe", this.model);
-  // },
-
   clearInput: function(event) {
     $('input').val('');//clear all values in any input tags
   },
diff --git a/src/app/views/contact_view.js b/src/app/views/contact_view.js
index 78b7d4f..c6645a9 100644
--- a/src/app/views/contact_view.js
+++ b/src/app/views/contact_view.js
@@ -7,9 +7,6 @@ const ContactView = Backbone.View.extend({
 
   initialize: function(options) {
     this.rolodexTemplate = _.template($('#tmpl-contact-card').html());//template provided in script tag in index.html
-    this.contactTemplate = _.template($('#tmpl-contact-details').html()); //script template for contact details
-    this.input = options.input;
-    this.collection = options.collection;
   },
 
   render: function() {
diff --git a/src/app/views/rolodex_view.js b/src/app/views/rolodex_view.js
index bb423e6..73e56ff 100644
--- a/src/app/views/rolodex_view.js
+++ b/src/app/views/rolodex_view.js
@@ -1,7 +1,6 @@
 import $ from 'jquery';
 import _ from 'underscore';
 import Backbone from 'backbone';
-import Rolodex from 'app/collections/rolodex';
 import ContactView from 'app/views/contact_view';
 import ContactDetailView from 'app/views/contact_detail_view';
 
@@ -38,14 +37,15 @@ const RolodexView = Backbone.View.extend({
   },
 
   makeDetail: function(model){
-    $('#contact-details').empty();
+    $('#contact-details').empty();//clears modal of previous details
+    //create new detail view
     var cardDetail = new ContactDetailView({
       model: model
     });
-    cardDetail.render();
+    cardDetail.render(); //render the details
     this.listenTo(cardDetail, "editMe", this.editCard);
-    $('#contact-details').append(cardDetail.$el);
-    $('#contact-details').show();
+    $('#contact-details').append(cardDetail.$el); //append card details
+    $('#contact-details').show(); //show modal
   },
 
   editCard: function(cardModel) {
@@ -54,15 +54,13 @@ const RolodexView = Backbone.View.extend({
   this.input.name.val(cardModel.get("name"));
   this.input.email.val(cardModel.get("email"));
   this.input.phone.val(cardModel.get("phone"));
-  this.model.remove(cardModel);
+  this.model.remove(cardModel); //temporarily remove contact from collection while edited
 },
 
   addContact: function(contact) {
     var card = new ContactView({
       // el: $('#contact-cards'), <---still unsure why when el was specified (and direct li objects were added to ul tag), .contact-card tags could not be clicked independently
       model: contact, //contacts created with each individual model passed through
-      input: this.input,
-      collection: this.model
     });
     this.listenTo(card, "deetsplz", this.makeDetail);
     this.cardList.push(card); //add each contact view to cardlist matrix