Wave two is complete

build/index.html

@@ -43,7 +43,7 @@ <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">
-        <h4><%- name %></h4>
+        <h4><%- contact.name %></h4>
       </li>
     </script>
 

src/app.js

@@ -1,9 +1,42 @@
+import $ from 'jquery';
+import Backbone from 'backbone';
+import _ from 'underscore';
+import ContactView from 'app/views/contact_view';
+import Rolodex from 'app/collections/rolodex';
+import RolodexView from 'app/views/rolodex_view';
+
+
 import Application from 'app/models/application';
 import ApplicationView from 'app/views/application_view';
 
-var application = new Application();
+var contactData = [
+  {
+    name: "Malika",
+    email: "Malika.NZY@gmail.com",
+    phone: "206-555-1212"
+  }, {
+    name: "Taybor",
+    email: "Tay@ada.com",
+    phone: "206-123-1234"
+  }
+];
+
+
+$(document).ready(function(){
+  var contactTemplate = _.template($('#tmpl-contact-details').html());
+
+  var cardList = new Rolodex(contactData);
+  var rolodex = new RolodexView({
+    el: $('#application'),
+    model: cardList
+  });
+  rolodex.render();
+  // $('#contact-details').append(cardList[0].render().$el);
 
-var appView = new ApplicationView({
-  el: '#application',
-  model: application
+  // var application = new Application();
+  // var appView = new ApplicationView({
+  //   el: '#application',
+  //   model: application
+  // });
+  // application.render();
 });

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;

src/app/models/contact.js

@@ -1,8 +1,16 @@
 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: 'name',
+    email: 'name@email.com',
+    phone: '777-777-777'
+  },
+  initialize: function(options){
+    console.log('new contact created for: ' +
+  this.get("name"));
+  }
 });
 
 export default Contact;

src/app/views/contact_view.js

@@ -1,6 +1,28 @@
 import Backbone from 'backbone';
+import Contact from 'app/models/contact';
 
 const ContactView = Backbone.View.extend({
+  initialize: function(options){
+    // this.name = options.name,
+    // this.email = options.email,
+    // this.phone = options.phone,
+    this.model = options.model;
+    this.template = options.template;
+
+    this.listenTo(this.model, 'update', this.render);
+  },
+  // have the contact vew listen for a click event:
+  events: {
+    'click .contact-card': 'showHandler'
+  },
+  showHandler: function(event){
+    this.trigger('showCardDetails', this.model);
+  },
+  render: function(){
+    var html = this.template({contact: this.model.attributes});
+    this.$el.html(html);
+    return this;
+  }
 });
 
 export default ContactView;

src/app/views/rolodex_view.js

@@ -1,6 +1,110 @@
 import Backbone from 'backbone';
+import $ from 'jquery';
+import _ from 'underscore';
+
+import Contact from 'app/models/contact';
+import ContactView from 'app/views/contact_view';
+
 
 const RolodexView = Backbone.View.extend({
-});
+  initialize: function(options) {
+
+    // template for the individual contact cards
+    this.contactCardTemplate = _.template($('#tmpl-contact-card').html());
+
+    this.contactDetailsTemplate = _.template($('#tmpl-contact-details').html());
+
+    // keep track of the elements that will be used to render the contact card and the contact details
+    this.listElement = this.$('#contact-cards');
+    this.detailsElement = this.$('#contact-details');
+
+    // list of card views:
+    this.cardList = [];
+
+    // process each task as they are created:
+    this.model.forEach(function(contact){
+      this.addContact(contact);
+    }, this); // bind 'this' so it's available inside forEach (????)
+    this.input = {
+      name: this.$('.contact-form input[name="name"]'),
+      email: this.$('.contact-form input[email="email"]'),
+      phone: this.$('.contact-form input[phone="phone"]')
+    };
+
+    // when a model is added to the collection, add a contactCard for it
+    this.listenTo(this.model, 'add', this.addContact);
+
+    // re-render the list when the collection changes:
+    this.listenTo(this.model, 'update', this.render);
+
+
+  },
+  render: function() {
+    // need to make sure the list in the DOM is empty before appending new items
+
+    this.listElement.empty();
+
+    // iterate through the data assigned:
+    this.cardList.forEach(function(contactCard){
+      contactCard.render();
+      this.listElement.append(contactCard.$el);
+    }, this);
+    return this;
+  },
+  events: {
+    'click .btn-save': 'createContact',
+    'click .btn-cancel': 'clearInput',
+
+  },
+
+  createContact: function(event) {
+    event.preventDefault(); // supress the refreshing of page with a form submission
+
+    // get the input and turn it into a contact:
+    var rawContact = this.getInput();
+
+    // add the contact to the model??
+    var contact = this.model.add(rawContact);
+
+    // this.addContact(contact);
+    // this.render();
+    // clear the input form:
+    this.clearInput();
+  }, // end create contact
+
+  getInput: function(){
+    var contact = {
+      name: this.input.name.val(),
+      email: this.input.email.val(),
+      phone: this.input.phone.val()
+    };
+    return contact;
+  }, // end getInput
+
+  addContact: function(contact){
+    // this is to make a view for new contacts and add them to the cardList:
+    var contactCard = new ContactView({
+      model: contact,
+      template: this.contactCardTemplate
+    });
+    // have each card listen for a click event:
+    this.listenTo(contactCard, 'showCardDetails', this.showDetails);
+    // add the card to the list
+    this.cardList.push(contactCard);
+
+  },
+
+  clearInput: function(event){
+    this.input.name.val('');
+    this.input.email.val('');
+    this.input.phone.val('');
+  },
+// need to show the details when a name is clicked:
+  showDetails: function(contactModel){
+    var details = this.contactDetailsTemplate({name: contactModel.get('name'), email: contactModel.get('email'), phone: contactModel.get('phone')})
+    this.detailsElement.html(details);
+  }
+
+}); // end of RolodexView
 
 export default RolodexView;