A Backbone.js Playground

A simple playground for learning backbone.js without having to install or configure anything yourself.

by Hemanth HM

HTML

<script src="http://documentcloud.github.com/underscore/underscore-min.js"></script>
<script src="http://documentcloud.github.com/backbone/backbone-min.js"></script>
<script src="https://raw.github.com/derickbailey/backbone.modelbinding/master/backbone.modelbinding.min.js"></script>
<script src="https://raw.github.com/derickbailey/backbone.memento/master/backbone.memento.min.js"></script>
<script src="http://ajax.microsoft.com/ajax/jquery.templates/beta1/jquery.tmpl.js"></script>
<div id="someElement">
  <button id="someButton">Click Me</button>
</div>

JavaScript

var Appointment = Backbone.Model.extend({
defaults: function() {
return {
'date': new Date(),
'cancelled': false,
'title': 'Checkup'
}
}
});
 
var AppointmentList = Backbone.Collection.extend({
model: Appointment
});

var AppointmentView = Backbone.View.extend({
template: _.template('<span class="<% if(cancelled) print("cancelled") %>"><%= title %></span><a href="#">x</a>'),
 
initialize: function(){
this.model.on('change', this.render, this);
},
render: function(){
this.$el.html(this.template(this.model.toJSON()));
return this;
}
});
 
var AppointmentListView = Backbone.View.extend({
initialize: function(){
this.collection.on('add', this.addOne, this);
this.collection.on('reset', this.render, this);
},
render: function(){
this.collection.forEach(this.addOne, this);
},
addOne: function(model){
var appointmentView = new AppointmentView({model: model});
appointmentView.render();
this.$el.append(appointmentView.el);
}
});