I am practicing using the Prototype pattern and to do so, I am building a simple CRUD app that allows me to view, add, and delete customers.
Here is a JsFiddle for you to see what I've got so far.
// Create customer 'class' and store state here
var Customer = function(el) {
this.el = document.getElementById(el);
this.first_name = $("#input_first_name").val();
this.last_name = $("#input_last_name").val();
this.name = ""
}
var customers = [];
// In the Customer prototype store methods
Customer.prototype = {
// utility to log customer array
logCustomers: function() {
console.log(customers);
},
fullName: function() {
this.name = this.first_name + " " + this.last_name;
return this.name;
},
addCustomer: function() {
// clear out the current html to make room for the append later
this.el.innerHTML = "";
// create new customer instance
var cust = new Customer();
// add customer to the array
customers.push(cust);
// iterate through the array and add each customer to a row in the table
$.each(customers, function() {
$("#el").append("<tr><td>" + this.fullName() + "</td><td><a id='btn_remove_cust' class='btn btn-mini btn-danger'>delete</a></td></tr>");
})
// Clear out the text boxes
$("#input_first_name").val("");
$("#input_last_name").val("");
},
// Remove customer from array and hide the row that contained them
removeCustomer: function(e) {
$(e.target).closest('tr').hide();
customers.splice(e.target, 1);
}
}
// Default customer object has to be created in order for unobtrusive calls to work
var cust = new Customer("el");
// unobtrusive jQuery event handling below
$("#btn_add_customer").click(function() {
cust.addCustomer();
});
$("#btn_remove_cust").live("click", cust.removeCustomer);
$("#btn_log_customers_array").click(cust.logCustomers)
There are a few things that I'm concerned about:
I'm using jQuery to handle events and I'm trying to make everything as unobtrusive as possible. In doing so, I wasn't exactly sure where I needed to place the event-handling code so I created a separate block below the prototype code to contain the button click events. I'm not sure if this is the best way to go.
The events are being passed a function from the prototype - so in order for anything to work I have to new-up an instance of the 'Customer' before the user actually creates a new customer. Seems like there might be a better way - but since I'm using a constructor function, I'm not sure if there is any other way around that. If I change the constructor to an object literal, than I've just got a singleton.
Am I handling the removal of 'customers' from the array properly? I created a simple utility function that is wired up to a button so that I could check and make sure that objects were being removed - as well as hidden in the DOM.