[Backbone] Verying Views

Below we have our AppointmentsView instance rendering and then taking the rendered HTML and inserting into the$('#app') element.

Change the code to instead pass in the $('#app') element into the view constructor to make it theappointmentsView.el.

var appointmentsView = new AppointmentsView({collection: appointments, el: $('#app')});
appointmentsView.render();

 

Update the AppointmentsView class to handle the extra option doctor passed into the constructor, like so: new AppointmentsView({collection: appointments, doctor: drGoodparts}) Assign the extra option to thedoctor property on the view instance.

var AppointmentsView = Backbone.View.extend({
  initialize: function(options){
      this.doctor = options.doctor;
  }
});

 

Dr. Goodparts recently hired an intern to input appointments and they've been injecting appointments with malicious titles to hack Dr. Goodparts' computer.

The intern was fired but you should probably update the AppointmentView to escape the title content.

var AppointmentView = Backbone.View.extend({
  template: _.template("<span><%= model.escape('title') %></span>"),
  render: function(){
    this.$el.html(this.template({model: this.model}));
  }
});

 

As you can see in the view code below, whenever the model's title attribute changes, we update the title in the view and highlight it to let the user know that it's been updated. Sometimes we want to be able to change the title without highlighting the view, but with still updating it in the view.

To accomplish this, we are passing in {highlight: false}. Update the changedTitle function below to use this extra option to selectively highlight the view.

var AppointmentView = Backbone.View.extend({
  template: _.template("<span><%= title %></span>"),
  initialize: function(){
        this.model.on('change:title', this.changedTitle, this);
  },
  render: function(){
    this.$el.html(this.template(this.model.attributes));
  },
  changedTitle: function(model, value, option){
    this.$('span').html(value);
    if(option.highlight!=false){
      this.$el.effect('highlight', {}, 1000);
    }    
  }
});

 

Use the new listenTo View function to make the view listen to the model's 'change:title' event, instead of having the model notify the view of the event. This way we can safely call remove() on the view and feel confident all of our events are cleaned up.

var AppointmentView = Backbone.View.extend({
  template: _.template("<span><%= title %></span>"),
  initialize: function(){
    this.listenTo(this.model, 'change:title', this.render);
  },
  render: function(){
    this.$el.html(this.template(this.model.attributes));
  },
  changedTitle: function(model, value, options){
    this.$('span').html(value);

    if (options.highlight !== false){
      this.$el.effect('highlight', {}, 1000); 
    }
  }
});