app.js

var ContactsController = require('./controller/Contacts');
var Contact = require('./model/Contacts');

document.addEventListener("DOMContentLoaded", function(event) {
  var contacts = new ContactsController();
  contacts.renderAll();
  contacts.setup();
});

ContactController.js

var ContactModel = require('../model/Contacts');
var ContactView = require('../view/Contact');
var AddContactForm = require('../view/AddContactForm');

/**
 * Controller Object to dispatch actions to view/Contact and model/Contacts.
 * @constructor
 */
var ContactsController = function() {
  this.init();
};

ContactsController.prototype = {
  init: function() {
    console.log('new controller');
  },

  setup: function() {
    var addContact = new AddContactForm();
  },

  /**
   * @description Fetches all existing contacts from LocalStorage.
   */
  fetchAll: function() {
    var contacts = [];
    var total = localStorage.length;

    for (i = 0; i < total; i++) {
      var contact = {};
      var key = localStorage.key(i);
      if (key !== 'debug') {
        contact.key = key;
        contact.value = JSON.parse(localStorage.getItem((i + 1).toString()));
        contacts.push(contact);
      }
    }

    return contacts;
  },

  /**
   * @description Adds all existing contacts to table. Intended for use
   * on startup.
   */
  renderAll: function() {
    var contacts = this.fetchAll();
    contacts.forEach(function(currentValue) {
      var contact = new ContactView(currentValue.key, currentValue.value);
    });
  }
};

ContactsController.remove = function(id) {
  console.log('Controller Remove');
  //ContactModel.remove(id);
  //ContactView.remove(id);
};

module.exports = ContactsController;

ContactsModel.js

var ContactModel = require('../model/Contacts');
var ContactView = require('../view/Contact');
var AddContactForm = require('../view/AddContactForm');

/**
 * Controller Object to dispatch actions to view/Contact and model/Contacts.
 * @constructor
 */
var ContactsController = {
  init: function() {
  },

  setup: function() {
    var addContact = new AddContactForm();
  },

  /**
   * @description Fetches all existing contacts from LocalStorage.
   */
  fetchAll: function() {
    var contacts = [];
    var total = localStorage.length;

    for (i = 0; i < total; i++) {
      var contact = {};
      var key = localStorage.key(i);
      if (key !== 'debug') {
        contact.key = key;
        contact.value = JSON.parse(localStorage.getItem((i + 1).toString()));
        contacts.push(contact);
      }
    }

    return contacts;
  },

  /**
   * @description Adds all existing contacts to table. Intended for use
   * on startup.
   */
  renderAll: function() {
    var contacts = this.fetchAll();
    contacts.forEach(function(currentValue) {
      var contact = new ContactView(currentValue.key, currentValue.value);
    });
  }
};

ContactsController.remove = function(id) {
  console.log('Controller Remove');
};

module.exports = ContactsController;

ContactsView.js

var ContactsController = require('../controller/Contacts');

/**
 * Creates new view of Contact
 * @constructor
 * @arg {Number} id - integer used as the key when saving to localStorage
 */
var ContactView = function(id, contact) {
  this.init(id, contact);
};

ContactView.prototype = {
  tagName: 'tr',
  el: '.js-contacts',
  idPrefix: 'contact-',

  /**
   * @description Setup view
   * @arg {Number} id - integer used as the key when saving to localStorage
   */
  init: function(id, contact) {
    this.id = id;
    this.contact = contact;
    this.paint();
  },

  /**
   * @description Attaches the view to the DOM
   */
  paint: function() {
    var $parent = document.querySelector(this.el)
    $parent.appendChild(this.template());
  },

  /**
   * @description Builds a DOM based object
   * @returns {DOM} this.$el DOM object ready to attach to the DOM
   */
  template: function() {
    var contactView = this;
    this.$el = document.createElement(this.tagName);
    this.$el.setAttribute('id', this.idPrefix + this.id.toString());
    this.$el.classList.add('Contact');
    this.$el.innerHTML = '<td class="Contact-givenName">' +
        this.contact.firstName +
      '</td> \n' +
      '<td class="Contact-familyName">' + this.contact.lastName + '</td> \n'+
      '<td class="Contact-tel">' + this.contact.tel + '</td> \n' +
      '<td class="Contact-actions"> \n' +
        '<button class="js-export">Export</button> \n' +
        '<button class="js-remove">Remove</button> \n' +
      '</td> \n';
    this.$el.querySelector('.js-remove').addEventListener('click', function() {
      contactView.onRemove(contactView.id);
    }, false);
    this.$el.querySelector('.js-export').addEventListener('click', function() {
      contactView.onExport(contactView.id);
    }, false);
    return this.$el;
  },

  /**
   * @description Method to be used as an event handler on Remove button
   * @arg {number} id - Key of item to be exported
   */
  onExport: function(id) {
    console.log('Export:', id.toString());
  },

  /**
   * @description Method to be used as an event handler on Remove button
   * @arg {number} id - Key of item to be deleted
   */
  onRemove: function(id) {
    ContactsController.remove(id);
  }
};


/**
 * @description Delete element from the DOM.
 * @arg {number} id - Key of the item to delete that will be converted to a
 * DOM id.
 */
ContactView.remove = function(id) {
  console.log('Remove: #contact-', id.toString());
};

module.exports = ContactView;