koenbok/backbone.html

## backbone.html
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">

<html lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

	<script type="text/javascript" charset="utf-8" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
	<script type="text/javascript" charset="utf-8" src="http://documentcloud.github.com/underscore/underscore.js"></script>
	<script type="text/javascript" charset="utf-8" src="http://documentcloud.github.com/backbone/backbone.js"></script>

	<script type="text/javascript" charset="utf-8">

		$(document).ready(function() {

			var Person = Backbone.Model.extend();
			var aPerson = new Person({id: "1", firstName: "Koen", lastName: "Bok"})

			// Views represent what should be visible
			var PersonView = Backbone.View.extend({

			    initialize: function() {
					var that = this;
			        this.model.bind('change:firstName', function() {that.render()});
			    },

				render: function() {

					$(this.el).html(
						_.template("<input type='text' value='<%= firstName %>' />", this.model.toJSON()));

					return this;
				},
				events: {
					"change input": "change"
				},
				change: function() {
					var newFirstName = this.$("input").val();
					console.log("Changing %s to %s", this.model.get("firstName"), newFirstName);
					this.model.set({firstName:newFirstName});
				}
			});

			var personView1 = new PersonView({model: aPerson});
			var personView2 = new PersonView({model: aPerson});

			$('#content').append(personView1.render().el)
			$('#content').append(personView2.render().el)


			$("#go").click(function() {
				aPerson.set({firstName: 'RESET'});
			})


		});

	</script>

</head>
	<body>
		<div id="content"></div>

		<input type="button" name="go" value="go" id="go">

	</body>
</html>
	<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
	"http://www.w3.org/TR/html4/strict.dtd">

	<html lang="en">
	<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

	<script type="text/javascript" charset="utf-8" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
	<script type="text/javascript" charset="utf-8" src="http://documentcloud.github.com/underscore/underscore.js"></script>
	<script type="text/javascript" charset="utf-8" src="http://documentcloud.github.com/backbone/backbone.js"></script>

	<script type="text/javascript" charset="utf-8">

	$(document).ready(function() {

	var Person = Backbone.Model.extend();
	var aPerson = new Person({id: "1", firstName: "Koen", lastName: "Bok"})

	// Views represent what should be visible
	var PersonView = Backbone.View.extend({

	initialize: function() {
	var that = this;
	this.model.bind('change:firstName', function() {that.render()});
	},

	render: function() {

	$(this.el).html(
	_.template("<input type='text' value='<%= firstName %>' />", this.model.toJSON()));

	return this;
	},
	events: {
	"change input": "change"
	},
	change: function() {
	var newFirstName = this.$("input").val();
	console.log("Changing %s to %s", this.model.get("firstName"), newFirstName);
	this.model.set({firstName:newFirstName});
	}
	});

	var personView1 = new PersonView({model: aPerson});
	var personView2 = new PersonView({model: aPerson});

	$('#content').append(personView1.render().el)
	$('#content').append(personView2.render().el)


	$("#go").click(function() {
	aPerson.set({firstName: 'RESET'});
	})


	});

	</script>

	</head>
	<body>
	<div id="content"></div>

	<input type="button" name="go" value="go" id="go">

	</body>
	</html>