Backbone render after cancelling - backbone.js

Question

I have the following backbone view. I had a doubt. In case if a model is deleted, i call the render after cancel(First Approach), the other way of doing it would be to have an initialize function, which renders the model listening to the event changes, inside the views.(Second Approach)
Could someone please let me know, the difference between one and two. As to which of the two is better.
First Approach
var AppointmentView = Backbone.View.extend({
template: _.template('">' +
'<%= title %>' +
'x'),
events: { "click a": "cancel" },
cancel: function(){
this.model.cancel();
this.render(); // rendering after cancel
},
render: function(){
this.$el.html(this.template(this.model.toJSON()));
}
});
Second Approach
var AppointmentView = Backbone.View.extend({
template: _.template('<span class="<% if(cancelled) print("cancelled") %>">' +
'<%= title %></span>' +
'x'),
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()));
}
});

Answer 1

I would define a custom cancelled event, trigger that from your cancel method, and bind to that event in the view.
var Appointment = Backbone.Model.extend({
cancel: function() {
//cancellation code...
this.trigger('cancelled', this);
}
});
var AppointmentView = Backbone.Model.extend({
initialize: function() {
this.listenTo(this.model, 'cancelled', this.render);
}
});
This way your view will re-render, even if the model is cancelled from elsewhere than the view itself, but you still get the specific behavior or only re-rendering upon cancel, and not on every change.