kyleondata/gist:3440492

## 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
	    -->
	    <script id="PeopleTemplate" type="text/x-handlebars-template">
		<div>
			{{#each []}}
				{{this.name}}
				{{this.age}}
				<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);
			}
		});

		// 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);
			},
			initialize: function(){
				this.collection.on('add', this.render, this)
			}
		});

		//THANKS Rameş Aliyev for the feedback on making this cleaner
		// https://gist.github.com/4682984

		 // Create instance of People Collection
		var people = new People();

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

		// Create instances of the views
		var personView = new PersonView({
		model: person
		});
		var peopleView = new PeopleView({
		collection: people
		});

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

		// Set el of the views.
		personView.el = $('#personContainer');
		peopleView.el = $('#peopleContainer');

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

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

		// Try on console!
		// people.add(new Person({name: 'Rames', age:'23'}));

		});
	    </script>


	    </head>
	    <body>
		<div id='personContainer' ></div>
		<hr>
		<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
	-->
	<script id="PeopleTemplate" type="text/x-handlebars-template">
	<div>
	{{#each []}}
	{{this.name}}
	{{this.age}}
	<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);
	}
	});

	// 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);
	},
	initialize: function(){
	this.collection.on('add', this.render, this)
	}
	});

	//THANKS Rameş Aliyev for the feedback on making this cleaner
	// https://gist.github.com/4682984

	// Create instance of People Collection
	var people = new People();

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

	// Create instances of the views
	var personView = new PersonView({
	model: person
	});
	var peopleView = new PeopleView({
	collection: people
	});

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

	// Set el of the views.
	personView.el = $('#personContainer');
	peopleView.el = $('#peopleContainer');

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

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

	// Try on console!
	// people.add(new Person({name: 'Rames', age:'23'}));

	});
	</script>


	</head>
	<body>
	<div id='personContainer' ></div>
	<hr>
	<div id='peopleContainer' ></div>

	</body>
	</html>