From 7eb5492f011443b25b3dab42fc22390228f26e57 Mon Sep 17 00:00:00 2001
From: amb54 <ambarklund@hotmail.com>
Date: Tue, 30 May 2017 18:41:40 -0700
Subject: [PATCH 01/15] Added default values for name, phone and email (empty
 string).

---
 src/app/models/contact.js | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/src/app/models/contact.js b/src/app/models/contact.js
index 395f247..69c0583 100644
--- a/src/app/models/contact.js
+++ b/src/app/models/contact.js
@@ -3,6 +3,11 @@ 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': '',
+    'phone': '',
+    'email': ''
+  }
 });
 
 export default Contact;

From 6f548a66fd2c2aa7e3c141813ca89ea9610d8469 Mon Sep 17 00:00:00 2001
From: amb54 <ambarklund@hotmail.com>
Date: Tue, 30 May 2017 18:42:51 -0700
Subject: [PATCH 02/15] Added spaces to make more readable (for me).

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

diff --git a/build/index.html b/build/index.html
index 1c01ae4..7e68f07 100644
--- a/build/index.html
+++ b/build/index.html
@@ -40,6 +40,9 @@ <h3 class="button btn-cancel">Cancel</h3>
       </main>
     </div>
 
+
+
+
     <!-- Underscore Templates -->
     <script type="text/template" id="tmpl-contact-card">
       <li class="contact-card small-11 medium-4 large-2 medium-offset-1 columns">

From e682dcf3046625a5cbfb894748ad610934461a0e Mon Sep 17 00:00:00 2001
From: amb54 <ambarklund@hotmail.com>
Date: Tue, 30 May 2017 18:47:20 -0700
Subject: [PATCH 03/15] Imported the underscore from the library underscore.
 Imported the model Contact. Created a collection of contacts with only one
 contact (contactData). Created an instance variable oneContact of the model
 Contact. Created the .ready block with two compiled templates that also is
 used.

---
 src/app.js | 24 ++++++++++++++++++++++++
 1 file changed, 24 insertions(+)

diff --git a/src/app.js b/src/app.js
index 854f991..38c8840 100644
--- a/src/app.js
+++ b/src/app.js
@@ -1 +1,25 @@
 import $ from 'jquery';
+import _ from 'underscore';
+
+// import MODELS
+import Contact from 'app/models/contact'
+
+var contactData = [
+  {
+    name: 'Donald Duck',
+    phone: '206 111 1111',
+    email: 'donalds@email.com'
+  }
+]
+
+var oneContact = new Contact(contactData[0]);
+
+$(document).ready(function() {
+  var contactCardTemplate = _.template($('#tmpl-contact-card').html());
+  var generateHTML1 = contactCardTemplate(oneContact.toJSON());
+  $('#contact-cards').append(generateHTML1)
+
+  var contactDetailsTemplate = _.template($('#tmpl-contact-details').html());
+  var generateHTML2 = contactDetailsTemplate(oneContact.toJSON());
+  $('#contact-details').append(generateHTML2)
+});

From cd343107813ea65b984813bb82345f4bd9319480 Mon Sep 17 00:00:00 2001
From: amb54 <ambarklund@hotmail.com>
Date: Wed, 31 May 2017 16:45:27 -0700
Subject: [PATCH 04/15]  Changed default values for name, email and phone in
 the model Contacts.

---
 src/app/models/contact.js | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/app/models/contact.js b/src/app/models/contact.js
index 69c0583..c852f21 100644
--- a/src/app/models/contact.js
+++ b/src/app/models/contact.js
@@ -4,9 +4,9 @@ const Contact = Backbone.Model.extend({
   // This model should have the attributes for
   // a single contact: name, phone number, and email.
   defaults: {
-    'name': '',
-    'phone': '',
-    'email': ''
+    'name': 'default Name',    
+    'email': 'defaultEmail',
+    'phone': 'defaultPhone',
   }
 });
 

From 99f68bbc2b88c0b911bea5ceb798304c7e8c577e Mon Sep 17 00:00:00 2001
From: amb54 <ambarklund@hotmail.com>
Date: Wed, 31 May 2017 17:04:08 -0700
Subject: [PATCH 05/15] Setup of collenction Rolodex for the model Contact.
 Added import of the model as well as assigning backbone model Contact.

---
 src/app/collections/rolodex.js | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/src/app/collections/rolodex.js b/src/app/collections/rolodex.js
index cc11371..a2ec0d1 100644
--- a/src/app/collections/rolodex.js
+++ b/src/app/collections/rolodex.js
@@ -1,10 +1,12 @@
 import Backbone from 'backbone';
+import Contact from '../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;

From 599ef9ec6793673d5a749e9de3d5bd0a83532a72 Mon Sep 17 00:00:00 2001
From: amb54 <ambarklund@hotmail.com>
Date: Wed, 31 May 2017 17:25:32 -0700
Subject: [PATCH 06/15] Added id for the inputs in the form.

---
 build/index.html | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/build/index.html b/build/index.html
index 7e68f07..92cfe39 100644
--- a/build/index.html
+++ b/build/index.html
@@ -18,15 +18,15 @@ <h3>Add A New Contact</h3>
           <div class="columns">
             <label>
               Name
-              <input type="text" name="name">
+              <input type="text" name="name" id = 'name'>
             </label>
             <label>
               Email
-              <input type="text" name="email">
+              <input type="text" name="email" id = 'email'>
             </label>
             <label>
               Phone
-              <input type="text" name="phone">
+              <input type="text" name="phone" id = 'phone'>
             </label>
             <h3 class="button btn-save">Save</h3>
             <h3 class="button btn-cancel">Cancel</h3>

From 97c1f128d07320ae758a4d90dbf8eff2c69c54b1 Mon Sep 17 00:00:00 2001
From: amb54 <ambarklund@hotmail.com>
Date: Wed, 31 May 2017 17:39:46 -0700
Subject: [PATCH 07/15] Added a contact to contactData. Imorted Rolodex.
 Declared two template variables and one vareable for a collection. Created
 the methods (functions) readForm, renderContact and renderRolodex. Updated
 the .ready block to handle adding a new contact and rendering all the contact
 cards.

---
 src/app.js | 80 ++++++++++++++++++++++++++++++++++++++++++++++++++----
 1 file changed, 75 insertions(+), 5 deletions(-)

diff --git a/src/app.js b/src/app.js
index 38c8840..429fe0a 100644
--- a/src/app.js
+++ b/src/app.js
@@ -3,23 +3,93 @@ import _ from 'underscore';
 
 // import MODELS
 import Contact from 'app/models/contact'
+import Rolodex from 'app/collections/rolodex'
+
+// GLOBAL variables
+var contactCardTemplate;
+var contactDetailsTemplate;
+var rolodexList;
+
+
 
 var contactData = [
   {
     name: 'Donald Duck',
     phone: '206 111 1111',
     email: 'donalds@email.com'
+  },
+  {
+    name: 'Minnie Mouse',
+    phone: '206 111 2222',
+    email: 'minnies@email.com'
   }
 ]
 
 var oneContact = new Contact(contactData[0]);
 
+var readForm = function(){
+  var formName = $('#name').val();
+  $('#name').val('');
+
+  var formEmail = $('#email').val();
+  $('#email').val('');
+
+  var formPhone = $('#phone').val();
+  $('#phone').val('');
+
+  var formData = {};
+  if (formName && formName != "") {
+    formData["name"] = formName
+  }
+  if (formEmail && formEmail != "") {
+    formData["email"] = formEmail
+  }
+  if (formPhone && formPhone != "") {
+    formData["phone"] = formPhone
+  }
+  return formData;
+};
+
+var renderContact = function(contact){
+  var jsonContact = contact.toJSON();
+  var generateHTML = contactCardTemplate(jsonContact);
+  $('#contact-cards').append(generateHTML);
+};
+
+var renderRolodex = function(rolodexList){
+  $('#contact-cards').empty();
+  rolodexList.each(function(contact){
+    renderContact(contact);
+  });
+};
+
+
+
 $(document).ready(function() {
-  var contactCardTemplate = _.template($('#tmpl-contact-card').html());
-  var generateHTML1 = contactCardTemplate(oneContact.toJSON());
-  $('#contact-cards').append(generateHTML1)
+  contactCardTemplate = _.template($('#tmpl-contact-card').html());
+  // var generateHTML1 = contactCardTemplate(oneContact.toJSON());
+  // $('#contact-cards').append(generateHTML1);
+  rolodexList = new Rolodex(contactData);
+  rolodexList.on('update', function(){
+    renderRolodex(rolodexList);
+  })
+  renderRolodex(rolodexList);
+
+  $('.btn-save').click(function(event){
+    var formData = readForm();
+    var newContact = new Contact(formData);
+    rolodexList.add(newContact);
+  });
+
+
 
-  var contactDetailsTemplate = _.template($('#tmpl-contact-details').html());
+  contactDetailsTemplate = _.template($('#tmpl-contact-details').html());
   var generateHTML2 = contactDetailsTemplate(oneContact.toJSON());
-  $('#contact-details').append(generateHTML2)
+  $('#contact-details').append(generateHTML2);
+
+
+
+
+
+
 });

From ca5ea4c65b5e8d157f593c51c292ea91098d750f Mon Sep 17 00:00:00 2001
From: amb54 <ambarklund@hotmail.com>
Date: Fri, 2 Jun 2017 09:16:16 -0700
Subject: [PATCH 08/15] Commented out the <li classcontact-card .

---
 build/index.html | 8 ++++++--
 1 file changed, 6 insertions(+), 2 deletions(-)

diff --git a/build/index.html b/build/index.html
index 92cfe39..74bdcbb 100644
--- a/build/index.html
+++ b/build/index.html
@@ -9,8 +9,11 @@
     <link rel="stylesheet" href="css/app.css">
     <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Nunito">
   </head>
+
+
   <body>
     <div id="application">
+
       <header>
         <h1>Rolodex</h1>
         <section class="row contact-form">
@@ -45,9 +48,9 @@ <h3 class="button btn-cancel">Cancel</h3>
 
     <!-- Underscore Templates -->
     <script type="text/template" id="tmpl-contact-card">
-      <li class="contact-card small-11 medium-4 large-2 medium-offset-1 columns">
+      <!-- <li class="contact-card small-11 medium-4 large-2 medium-offset-1 columns"> -->
         <h4><%- name %></h4>
-      </li>
+      <!-- </li> -->
     </script>
 
     <script type="text/template" id="tmpl-contact-details">
@@ -56,6 +59,7 @@ <h4><%- email %></h4>
       <h4><%- phone %></h4>
     </script>
 
+
     <!-- Entire JS project built by Webpack -->
     <script src="/app.bundle.js" charset="utf-8"></script>
   </body>

From ae984bcc460cceb13bd9f0401cc9899da37f2bea Mon Sep 17 00:00:00 2001
From: amb54 <ambarklund@hotmail.com>
Date: Fri, 2 Jun 2017 09:27:13 -0700
Subject: [PATCH 09/15] Created rolodex_view file and in this file created the
 backbone view RolodexView as anobject with the properties initializer,
 render, events, addContact, clearForm and readForm.

---
 src/app/views/rolodex_view.js | 67 +++++++++++++++++++++++++++++++++++
 1 file changed, 67 insertions(+)
 create mode 100644 src/app/views/rolodex_view.js

diff --git a/src/app/views/rolodex_view.js b/src/app/views/rolodex_view.js
new file mode 100644
index 0000000..78a3c14
--- /dev/null
+++ b/src/app/views/rolodex_view.js
@@ -0,0 +1,67 @@
+import Backbone from 'backbone';
+import _ from 'underscore';
+import $ from 'jquery';
+import ContactView from '../views/contact_view.js';
+import Contact from '../models/contact.js';
+
+var RolodexView = Backbone.View.extend({
+
+  initialize: function(params){
+    this.cardTemplate = params.cardTemplate;
+    this.detailTemplate = params.detailTemplate;
+    this.listenTo(this.model,'update', this.render);
+  },
+  render: function(){
+    var self = this;
+    this.$('#contact-cards').empty();
+    this.model.each(function(contact){
+      var contactView = new ContactView({
+        model: contact,
+        cardTemplate: self.cardTemplate,
+        detailTemplate: self.detailTemplate
+      });
+      self.$('#contact-cards').append(contactView.render().$el);
+
+    });
+    return this;
+  },
+  events: {
+    'click .btn-save': 'addContact',
+    'click .btn-cancel': 'clearForm'
+  },
+
+  addContact: function(){
+    var formData = this.readForm();
+    var newContact = new Contact(formData);
+    this.model.add(newContact);
+    // this.model.add(formData);
+  },
+
+  clearForm: function(){
+    this.$('#name').val('');
+    this.$('#email').val('');
+    this.$('#phone').val('');
+  },
+
+
+  readForm: function(){
+    var formName = this.$('#name').val();
+    var formEmail = this.$('#email').val();
+    var formPhone = this.$('#phone').val();
+    this.clearForm();
+
+    var formData = {};
+    if (formName && formName != "") {
+      formData["name"] = formName
+    }
+    if (formEmail && formEmail != "") {
+      formData["email"] = formEmail
+    }
+    if (formPhone && formPhone != "") {
+      formData["phone"] = formPhone
+    }
+    return formData;
+  }
+});
+
+export default RolodexView;

From a2c675c9942d02cc46f806fad666b31ec33d81b2 Mon Sep 17 00:00:00 2001
From: amb54 <ambarklund@hotmail.com>
Date: Fri, 2 Jun 2017 09:36:06 -0700
Subject: [PATCH 10/15] Added an object to the backbone view ContactView with
 the properties initialize, render, events and showDetails.

---
 src/app/views/contact_view.js | 31 +++++++++++++++++++++++++++++++
 1 file changed, 31 insertions(+)

diff --git a/src/app/views/contact_view.js b/src/app/views/contact_view.js
index 2d76cc9..db006f2 100644
--- a/src/app/views/contact_view.js
+++ b/src/app/views/contact_view.js
@@ -1,6 +1,37 @@
 import Backbone from 'backbone';
+import _ from 'underscore';
+import $ from 'jquery';
+import Contact from '../models/contact.js';
 
 const ContactView = Backbone.View.extend({
+  tagName: 'button',
+  className: "contact-card small-11 medium-4 large-2 medium-offset-1 columns",
+  initialize: function(params) {
+    this.cardTemplate = params.cardTemplate;
+    this.detailTemplate = params.detailTemplate;
+    // this.listenTo(this.model, "change", this.render);   // will listen to a change in the individual contact info
+  },
+
+  render: function() {  // called when we want it to load into DOM
+    var compiledTemplate = this.cardTemplate(this.model.toJSON());
+    this.$el.html(compiledTemplate);
+    return this;
+  },
+
+  events: {
+    'click button.contact-card': "showDetails"
+  },
+
+  showDetails: function(e) {
+    e.preventDefault();
+    this.$('#contact-details').show();
+    // var compiledTemplate = this.detailTemplate(this.model.toJSON());
+    // this.$el.html(compiledTemplate);
+    // return this;
+  }
+
+
+
 });
 
 export default ContactView;

From edd8100a9e8217622738c4205164f58381228263 Mon Sep 17 00:00:00 2001
From: amb54 <ambarklund@hotmail.com>
Date: Fri, 2 Jun 2017 09:39:00 -0700
Subject: [PATCH 11/15] Created a new instansvariable of the RolodexView and
 rendered it. Commented out all codewith functionality now incorporated int
 the views RolodexView and ContactView.

---
 src/app.js | 121 +++++++++++++++++++++++++++++++----------------------
 1 file changed, 72 insertions(+), 49 deletions(-)

diff --git a/src/app.js b/src/app.js
index 429fe0a..cf0aef3 100644
--- a/src/app.js
+++ b/src/app.js
@@ -5,6 +5,10 @@ import _ from 'underscore';
 import Contact from 'app/models/contact'
 import Rolodex from 'app/collections/rolodex'
 
+// import VIEWS
+import ContactView from 'app/views/contact_view'
+import RolodexView from 'app/views/rolodex_view'
+
 // GLOBAL variables
 var contactCardTemplate;
 var contactDetailsTemplate;
@@ -27,69 +31,88 @@ var contactData = [
 
 var oneContact = new Contact(contactData[0]);
 
-var readForm = function(){
-  var formName = $('#name').val();
-  $('#name').val('');
-
-  var formEmail = $('#email').val();
-  $('#email').val('');
-
-  var formPhone = $('#phone').val();
-  $('#phone').val('');
-
-  var formData = {};
-  if (formName && formName != "") {
-    formData["name"] = formName
-  }
-  if (formEmail && formEmail != "") {
-    formData["email"] = formEmail
-  }
-  if (formPhone && formPhone != "") {
-    formData["phone"] = formPhone
-  }
-  return formData;
-};
-
-var renderContact = function(contact){
-  var jsonContact = contact.toJSON();
-  var generateHTML = contactCardTemplate(jsonContact);
-  $('#contact-cards').append(generateHTML);
-};
-
-var renderRolodex = function(rolodexList){
-  $('#contact-cards').empty();
-  rolodexList.each(function(contact){
-    renderContact(contact);
-  });
-};
+// var readForm = function(){
+//   var formName = $('#name').val();
+//   $('#name').val('');
+//
+//   var formEmail = $('#email').val();
+//   $('#email').val('');
+//
+//   var formPhone = $('#phone').val();
+//   $('#phone').val('');
+//
+//   var formData = {};
+//   if (formName && formName != "") {
+//     formData["name"] = formName
+//   }
+//   if (formEmail && formEmail != "") {
+//     formData["email"] = formEmail
+//   }
+//   if (formPhone && formPhone != "") {
+//     formData["phone"] = formPhone
+//   }
+//   return formData;
+// };
+
+// var renderContact = function(contact){
+//   var jsonContact = contact.toJSON();
+//   var generateHTML = contactCardTemplate(jsonContact);
+//   $('#contact-cards').append(generateHTML);
+// };
+
+
+// REMOVE use VIEW instead ******************
+// var renderRolodex = function(rolodexList){
+//   $('#contact-cards').empty();
+//   rolodexList.each(function(contact){
+//     // renderContact(contact);
+//     var contactView = new ContactView({
+//       model: contact,
+//       template: _.template($('#tmpl-contact-card').html())
+//     });
+//     $('#contact-cards').append(contactView.render().$el);
+//   });
+// };
+  // *****************************************
 
 
 
 $(document).ready(function() {
   contactCardTemplate = _.template($('#tmpl-contact-card').html());
+  contactDetailsTemplate = _.template($('#tmpl-contact-details').html());
   // var generateHTML1 = contactCardTemplate(oneContact.toJSON());
   // $('#contact-cards').append(generateHTML1);
   rolodexList = new Rolodex(contactData);
-  rolodexList.on('update', function(){
-    renderRolodex(rolodexList);
-  })
-  renderRolodex(rolodexList);
-
-  $('.btn-save').click(function(event){
-    var formData = readForm();
-    var newContact = new Contact(formData);
-    rolodexList.add(newContact);
-  });
-
 
+  // REMOVE use VIEW instead ******************
+  // rolodexList.on('update', function(){
+  //   renderRolodex(rolodexList);
+  // })
+  // renderRolodex(rolodexList);
+
+  // $('.btn-save').click(function(event){
+  //   var formData = readForm();
+  //   var newContact = new Contact(formData);
+  //   rolodexList.add(newContact);
+  // });
+  // *****************************************
+
+  var rolodexView = new RolodexView({
+    cardTemplate: _.template($('#tmpl-contact-card').html()),
+    detailTemplate: _.template($('#tmpl-contact-details').html()),
+    model: rolodexList,
+    el: $('#application')
+  });
+  rolodexView.render();
 
-  contactDetailsTemplate = _.template($('#tmpl-contact-details').html());
-  var generateHTML2 = contactDetailsTemplate(oneContact.toJSON());
-  $('#contact-details').append(generateHTML2);
 
+  $('#contact-details').hide()
 
 
 
+  // contactDetailsTemplate = _.template($('#tmpl-contact-details').html());
+  // var generateHTML2 = contactDetailsTemplate(oneContact.toJSON());
+  // $('#contact-details').append(generateHTML2);
 
 
 });

From 3886fa2f4bf2b4067e77986d5420fedfda2e159a Mon Sep 17 00:00:00 2001
From: amb54 <ambarklund@hotmail.com>
Date: Sun, 4 Jun 2017 23:25:35 -0700
Subject: [PATCH 12/15] Changed .contact-card:hover h3  to .contact-card:hover
 h4.

---
 build/css/app.css | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/build/css/app.css b/build/css/app.css
index 638bd1f..ebd70c8 100644
--- a/build/css/app.css
+++ b/build/css/app.css
@@ -61,6 +61,6 @@ header {
     background-color: #538ca3;
 }
 
-.contact-card:hover h3 {
+.contact-card:hover h4 {
   color: white;
 }

From dc17f2aacbff5af9beeccc09f095378321ad492a Mon Sep 17 00:00:00 2001
From: amb54 <ambarklund@hotmail.com>
Date: Sun, 4 Jun 2017 23:43:28 -0700
Subject: [PATCH 13/15] Added the window click event

---
 src/app.js | 9 +++++++--
 1 file changed, 7 insertions(+), 2 deletions(-)

diff --git a/src/app.js b/src/app.js
index cf0aef3..e978c19 100644
--- a/src/app.js
+++ b/src/app.js
@@ -108,11 +108,16 @@ $(document).ready(function() {
 
   $('#contact-details').hide()
 
-
+  $(window).click(function(event) {
+    // console.log(event.target.id);
+    // console.log(event.target.id === 'contact-details');
+    if( event.target.id !== 'contact-details'){
+      $('#contact-details').hide()
+    }
+  });
 
   // contactDetailsTemplate = _.template($('#tmpl-contact-details').html());
   // var generateHTML2 = contactDetailsTemplate(oneContact.toJSON());
   // $('#contact-details').append(generateHTML2);
 
-
 });

From f75618531d8cdaff28dae5077f8e5b289fb3ad51 Mon Sep 17 00:00:00 2001
From: amb54 <ambarklund@hotmail.com>
Date: Sun, 4 Jun 2017 23:53:26 -0700
Subject: [PATCH 14/15] Minor changes in tagName, render and events. Updated
 showDetails with the trigger function for rolodex_view to listen to.

---
 src/app/views/contact_view.js | 16 +++++++---------
 1 file changed, 7 insertions(+), 9 deletions(-)

diff --git a/src/app/views/contact_view.js b/src/app/views/contact_view.js
index db006f2..90119d0 100644
--- a/src/app/views/contact_view.js
+++ b/src/app/views/contact_view.js
@@ -4,7 +4,7 @@ import $ from 'jquery';
 import Contact from '../models/contact.js';
 
 const ContactView = Backbone.View.extend({
-  tagName: 'button',
+  tagName: 'li',
   className: "contact-card small-11 medium-4 large-2 medium-offset-1 columns",
   initialize: function(params) {
     this.cardTemplate = params.cardTemplate;
@@ -13,21 +13,19 @@ const ContactView = Backbone.View.extend({
   },
 
   render: function() {  // called when we want it to load into DOM
-    var compiledTemplate = this.cardTemplate(this.model.toJSON());
-    this.$el.html(compiledTemplate);
+    var compiledTemplate1 = this.cardTemplate(this.model.toJSON());
+    this.$el.html(compiledTemplate1);
     return this;
   },
 
   events: {
-    'click button.contact-card': "showDetails"
+    'click ': "showDetails"
   },
 
   showDetails: function(e) {
-    e.preventDefault();
-    this.$('#contact-details').show();
-    // var compiledTemplate = this.detailTemplate(this.model.toJSON());
-    // this.$el.html(compiledTemplate);
-    // return this;
+    e.stopPropagation();
+    $('#contact-details').show();
+    this.trigger('select', this)
   }
 
 

From a987ab2d484aadc22ec03bad0cf16f6f029440b7 Mon Sep 17 00:00:00 2001
From: amb54 <ambarklund@hotmail.com>
Date: Sun, 4 Jun 2017 23:56:36 -0700
Subject: [PATCH 15/15] Updated the render function with listenTo (the trigger
 in contact_view). Created the function show_details.

---
 src/app/views/rolodex_view.js | 15 +++++++++++++--
 1 file changed, 13 insertions(+), 2 deletions(-)

diff --git a/src/app/views/rolodex_view.js b/src/app/views/rolodex_view.js
index 78a3c14..b388376 100644
--- a/src/app/views/rolodex_view.js
+++ b/src/app/views/rolodex_view.js
@@ -11,6 +11,7 @@ var RolodexView = Backbone.View.extend({
     this.detailTemplate = params.detailTemplate;
     this.listenTo(this.model,'update', this.render);
   },
+
   render: function(){
     var self = this;
     this.$('#contact-cards').empty();
@@ -21,10 +22,11 @@ var RolodexView = Backbone.View.extend({
         detailTemplate: self.detailTemplate
       });
       self.$('#contact-cards').append(contactView.render().$el);
-
+      self.listenTo(contactView,'select', self.show_details)
     });
     return this;
   },
+
   events: {
     'click .btn-save': 'addContact',
     'click .btn-cancel': 'clearForm'
@@ -43,7 +45,6 @@ var RolodexView = Backbone.View.extend({
     this.$('#phone').val('');
   },
 
-
   readForm: function(){
     var formName = this.$('#name').val();
     var formEmail = this.$('#email').val();
@@ -61,6 +62,16 @@ var RolodexView = Backbone.View.extend({
       formData["phone"] = formPhone
     }
     return formData;
+  },
+
+  show_details: function(contactView){
+
+    // console.log('Click of button for ' + this.model.get('name'));
+    console.log('Click of button for ' + contactView.model.get('name'));
+    var compiledTemplate2 = this.detailTemplate(contactView.model.toJSON());
+    $('#contact-details').html(compiledTemplate2);
+    return this;
+
   }
 });