Cacher is the code snippet organizer for pro developers

<div id="peopleModule">
    <h1>People</h1>
    <input placeholder="name" type="text">
    <button id="addPerson">Add Person</button>
    <ul id="people">
        <script id="people-template" type="text/template">
            {{#people}}
                <li>
                    <span>{{.}}</span>
                    <i class="del">X</i>
                </li>
            {{/people}}
        </script>
    </ul>

</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/mustache.js/2.1.2/mustache.min.js"></script>
</body>
</html>
<script>
$(function() {
			// create an object
		var people = {
			people: ['Will','Steve'],
			init: function () {
				this.cacheDOM();
				this.bindEvents();
				this.render();
			},
			cacheDOM: function () {
				this.$el 			= $("#peopleModule");
				this.$button 	= this.$el.find('button');
				this.$input  	= this.$el.find('input');
				this.$ul 			= this.$el.find('ul');
				this.template = this.$el.find($("#people-template")).html();
			},
			bindEvents: function () {
				// this.$button.on('click', this.addPerson); // Note: Whenever binding an event the context is going to change this will not work. so this value of "this.addPerson" is no longer to be people 	"var people = {}". 
				// the way to get around this is to use .bind(this)
				// Remember whenever you're doing Modilar JS, if you want method to always run in  the context where the this value point to the module then you have to bind it because as soon as it get called from the event listener from a click event the context of this will change, the value of this will change.
				// in this case we want this to always mean the people module so that case you binding it to this.
				this.$button.on('click', this.addPerson.bind(this));
		    this.$ul.delegate('i.del', 'click', this.deletePerson.bind(this));
			},
			render: function () {
				var data = {
					people: this.people
				};
				this.$ul.html(Mustache.render(this.template, data));
			},
			addPerson: function () {
				this.people.push(this.$input.val());
				this.render();
				this.$input.val('');
			},
			deletePerson: function (event) {
				var $remove = $(event.target).closest('li');
				var i = this.$ul.find('li').index($remove);
				this.people.splice(i, 1);
				this.render();
			}
		};
		people.init();

		// var people = [];
		// var template = $("#people-template").html();
		// var peopleModule = $("#peopleModule");
		// var peopleModuleUL = $("#peopleModule").find("ul");

		// peopleModule.find("button").on('click', function() {

		// 	people.push( $("#peopleModule").find("input").val() );
		// 	peopleModule.find("input").val('');

		// 	// data for mustache template
		// 	var data = {
		// 		people: people,
		// 	};
		// 	peopleModuleUL.html(Mustache.render(template, data));
		// });

		// peopleModuleUL.delegate('i.del', 'click', function(e) {
		// 	var $remove = $(e.target).closest('li');
		// 	var i = peopleModuleUL.find('li').index($remove)
		// 	$remove.remove();
		// 	people.splice(i, 1)
		// });

});
</script>