kyleondata/gist:3489548

## gistfile1.html
<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

	<script src="jquery-1.7.2.min.js" ></script>
	<script src="handlebars-1.0.0.beta.6.js" ></script>
	<script src="underscore-min.js" ></script>
	<script src="backbone-min.js" ></script>

	<!-- Setup our templates -->
	<script id="PersonTemplate" type="text/x-handlebars-template">
		<div>
			{{name}}
			{{age}}
		<div>
	</script>

	<!--
		Note the []  this is important
		because handlebars and backbone collections
		dont play well with each other in regards
		to naming JSON groups

		Added a button to this template with the id of the person
	-->
	<script id="PeopleTemplate" type="text/x-handlebars-template">
		<div>
			{{#each []}}
				{{this.name}}
				{{this.age}}
				<input type="button"
					id="{{this.id}}" value="Remove" />
				<br/>
			{{/each}}
		<div>
	</script>
	<!-- End templates setup -->


	<script>
		// Stub out the person model
		var Person = Backbone.Model.extend({

		});

		// Create a collection of persons
		var People = Backbone.Collection.extend({
			model: Person
		});

		// Define the view for a single person
		var PersonView = Backbone.View.extend({
			render: function() {
				// This is method that can be called
				// once an object is init. You could
				// also do this in the initialize event
				var source = $('#PersonTemplate').html();
				var template = Handlebars.compile(source);
				var html = template(this.model.toJSON());

				this.$el.html(html);
			},


		});

		var people = new People();

		// Define the view for People
		var PeopleView = Backbone.View.extend({
			render: function() {
				// This is method that can be called
				// once an object is init. You could
				// also do this in the initialize event
				var source = $('#PeopleTemplate').html();
				var template = Handlebars.compile(source);
				var html = template(this.collection.toJSON());

				this.$el.html(html);
			},

			// Create event listeners
			events: {
				"click input[type=button]": "removePerson"
			},

			// Function for removing a person
			removePerson: function(event){
				// get the id from the
				// element fired from the event
				var id = parseInt(event.currentTarget.id);
				// Look at the views collection
				// and get the person
				var person = this.collection.where({id: id});
				// Remove the person
				people.remove(person);
				// Rerender
				peopleView.render();
			}
		});


		var peopleView;
		$(document).ready(function(){
			// We have to do this stuff in the dom ready
			// so that the container objects get built out

			// Create new instances of the person models
			var person = new Person({
				id: 0,
				name: "Tim",
				age: 5
			});
			var person2 = new Person({
				id: 1,
				name: "Jill",
				age: 15
			});

			// Add them to a new instance of the people collection
			people.add(person);
			people.add(person2);

			// Create instances of the views
			var personView = new PersonView({
				model: person,
				el: $('#personContainer')
			});

			peopleView = new PeopleView({
				collection: people,
				el: $('#peopleContainer')
			});

			// Render the views.  If you are using the initialize
			// method then you do not have to do this step.
			personView.render();
			peopleView.render();

		});

		function addNewPerson()
		{
			// Get the new ID
			var count = people.length;
			// Create the new person object
			var newPerson = new Person({
				id: count,
				name: $('#newPersonName').val(),
				age: $('#newPersonAge').val()
			});

			// Add it to the people collection
			people.add(newPerson);
			// Rerender
			peopleView.render();

		}
	</script>


</head>
<body>
	<div id='personContainer' ></div>
	<hr>
	<input type='text' id='newPersonName' />
	<input type='text' id='newPersonAge' />
	<button  onClick='addNewPerson()' >Add</button>
	<div id='peopleContainer' ></div>

</body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

	<script src="jquery-1.7.2.min.js" ></script>
	<script src="handlebars-1.0.0.beta.6.js" ></script>
	<script src="underscore-min.js" ></script>
	<script src="backbone-min.js" ></script>

	<!-- Setup our templates -->
	<script id="PersonTemplate" type="text/x-handlebars-template">
	<div>
	{{name}}
	{{age}}
	<div>
	</script>

	<!--
	Note the [] this is important
	because handlebars and backbone collections
	dont play well with each other in regards
	to naming JSON groups

	Added a button to this template with the id of the person
	-->
	<script id="PeopleTemplate" type="text/x-handlebars-template">
	<div>
	{{#each []}}
	{{this.name}}
	{{this.age}}
	<input type="button"
	id="{{this.id}}" value="Remove" />
	<br/>
	{{/each}}
	<div>
	</script>
	<!-- End templates setup -->


	<script>
	// Stub out the person model
	var Person = Backbone.Model.extend({

	});

	// Create a collection of persons
	var People = Backbone.Collection.extend({
	model: Person
	});

	// Define the view for a single person
	var PersonView = Backbone.View.extend({
	render: function() {
	// This is method that can be called
	// once an object is init. You could
	// also do this in the initialize event
	var source = $('#PersonTemplate').html();
	var template = Handlebars.compile(source);
	var html = template(this.model.toJSON());

	this.$el.html(html);
	},


	});

	var people = new People();

	// Define the view for People
	var PeopleView = Backbone.View.extend({
	render: function() {
	// This is method that can be called
	// once an object is init. You could
	// also do this in the initialize event
	var source = $('#PeopleTemplate').html();
	var template = Handlebars.compile(source);
	var html = template(this.collection.toJSON());

	this.$el.html(html);
	},

	// Create event listeners
	events: {
	"click input[type=button]": "removePerson"
	},

	// Function for removing a person
	removePerson: function(event){
	// get the id from the
	// element fired from the event
	var id = parseInt(event.currentTarget.id);
	// Look at the views collection
	// and get the person
	var person = this.collection.where({id: id});
	// Remove the person
	people.remove(person);
	// Rerender
	peopleView.render();
	}
	});


	var peopleView;
	$(document).ready(function(){
	// We have to do this stuff in the dom ready
	// so that the container objects get built out

	// Create new instances of the person models
	var person = new Person({
	id: 0,
	name: "Tim",
	age: 5
	});
	var person2 = new Person({
	id: 1,
	name: "Jill",
	age: 15
	});

	// Add them to a new instance of the people collection
	people.add(person);
	people.add(person2);

	// Create instances of the views
	var personView = new PersonView({
	model: person,
	el: $('#personContainer')
	});

	peopleView = new PeopleView({
	collection: people,
	el: $('#peopleContainer')
	});

	// Render the views. If you are using the initialize
	// method then you do not have to do this step.
	personView.render();
	peopleView.render();

	});

	function addNewPerson()
	{
	// Get the new ID
	var count = people.length;
	// Create the new person object
	var newPerson = new Person({
	id: count,
	name: $('#newPersonName').val(),
	age: $('#newPersonAge').val()
	});

	// Add it to the people collection
	people.add(newPerson);
	// Rerender
	peopleView.render();

	}
	</script>


	</head>
	<body>
	<div id='personContainer' ></div>
	<hr>
	<input type='text' id='newPersonName' />
	<input type='text' id='newPersonAge' />
	<button onClick='addNewPerson()' >Add</button>
	<div id='peopleContainer' ></div>

	</body>
	</html>