Skip to content

Instantly share code, notes, and snippets.

@vistajess
Created August 11, 2015 15:28
Show Gist options
  • Save vistajess/b5d6d97ddf522eea3ccf to your computer and use it in GitHub Desktop.
Save vistajess/b5d6d97ddf522eea3ccf to your computer and use it in GitHub Desktop.
Sample Modular JS Pattern
(function() {
var customer = {
customer: [],
init: function() {
this.cacheDOM();
this.bindEvents();
this.render();
},
cacheDOM: function() {
this.$el = $('#customerModule');
this.$input = this.$el.find('input');
this.$search = this.$el.find('button#search-button');
this.$button = this.$el.find('button#print');
this.$ul = this.$el.find('ul');
this.template = this.$el.find('#customer-template').html();
},
bindEvents: function() {
this.$button.on('click', this.printData.bind(this));
this.$search.bind('click', this.searchData.bind(this));
},
render: function() {
console.log(this.customer);
this.$ul.html(Mustache.render(this.template, {
customer: this.customer
}));
},
printData: function() {
$.getJSON('js/customer.json', function(response) {
$.each(response, function(i, customer) {
this.customer.push(customer);
}.bind(this));
this.render();
}.bind(this));
},
searchData: function(input) {
$.getJSON('js/customer.json', function(response) {
console.log(response);
$.each(response, function(i, customer) {
if (customer.Name.search(input) >= 0) {
console.log('Search Found');
this.customer.push(customer);
} else {
console.log('Not Found');
}
}.bind(this));
this.render();
}.bind(this));
}
}
customer.init();
})()
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment