Backbone.js walkthough

anatomy-backbone.js

// an Appointment model class.
var Appointment = Backbone.Model.extend({});
// Appointment model class, let's create our first instance and assign it to the appointment variable. 
//Pass in a title for the appointment when creating it.
var appointment = new Appointment();
// set the title of the appointment instance! Set it to any string
appointment.set('title', 'My knee hurts');
// we have our very first appointment. But it isn't so useful, sitting there deep down in the bowels of your browser. 
//To display it lets first create a view class and name it AppointmentView
var AppointmentView = Backbone.View.extend({
  // Our AppointmentView instance is almost ready, all we have to do is go 
// back and define the AppointmentView render function so we can actually create some HTML. Have the render 
// function add an <li> tag to the top-level element of the view. Use this.model.get('title') as the content of the <li>.
  render: function(){
    $(this.el).html('<li>' + this.model.get('title') + '</li>');
  }
});
// AppointmentView instance. When doing so, don't forget to include the appointment model instance we just created. 
// Assign the instance to a variable.
var appointmentView = new AppointmentView({model: appointment});
// ender the appointmentView instance and then insert its top-level element into #app using $('#app').html()
appointmentView.render();
$('#app').html(appointmentView.el);