Backbone 04 codeschool model and view

gistfile1.js

var AppointmentView = Backbone.View.extend({
  template: _.template('<span><%= title %></span><a href="#">x</a>'),
  events: {"click a": "cancel"},
  
  cancel: function() {
    this.model.set({cancelled:true});
  },
  
  render: function(){
    this.$el.html(this.template(this.model.toJSON()));
  }
});

//model

var Appointment = Backbone.Model.extend({
  cancel: function(){
    this.set({cancelled: true});
    this.save();
  }
});

//view
var AppointmentView = Backbone.View.extend({
  template: _.template('<span><%= title %></span> <a href="#">x</a>'),
  events:  { "click a": "cancel" },
  cancel: function(){
    this.model.cancel();
  },
  render: function(){
    this.$el.html(this.template(this.model.toJSON()));
  }
});

//app
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);
  },

  events:  { "click a": "cancel" },
  cancel: function(){
    this.model.cancel();
  },
  render: function(){
    this.$el.html(this.template(this.model.toJSON()));
  }
});

//remove - destroy
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);
    this.model.on('destroy', this.remove, this);
  },

  events:  { "click a": "cancel" },
  cancel: function(){
    this.model.cancel();
  },
  render: function(){
    this.$el.html(this.template(this.model.toJSON()));
  },
  remove: function() {
    this.$el.remove();
  }
  
});