Skip to content

Instantly share code, notes, and snippets.

@koenbok
Created November 25, 2010 00:29
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
Star You must be signed in to star a gist
Save koenbok/714695 to your computer and use it in GitHub Desktop.
Backbone Experiment
<!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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment