[Backbone]7. Collection Views, Custom Events

It's finally time to start building out our Appointment app. We're going to be using a collection and a collection view to display a list of appointments to the ornery but brilliant Dr. Goodparts.

Let's start by creating a View Class named AppointmentListView and then create an instance of that class, passing in our collection instance appointments

var Appointment = Backbone.Model.extend({});
 
var AppointmentList = Backbone.Collection.extend({
  model: Appointment
});

Answer:

var appointments = new AppointmentList();
var AppointmentListView = Backbone.View.extend({});
var appointmentListView = new AppointmentListView({collection: appointments });

 

Good morning. Last night you were so close to implementing the render function on AppointmentListView but decided to take a nap, and here you are!

Go ahead and implement the addOne function, rendering an AppointmentView for each model in the collection, and appending it to the collection view's top-level element.

Note There is a bug in the forEach call. Make sure and fix it before submitting.

var Appointment = Backbone.Model.extend({});
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>'),
    
    render: function(){
        this.$el.html(this.tamplate(this.model.toJSON()));
        return this;
    }
});

Answer:

var AppointmentListView = Backbone.View.extend({
  render: function(){
    this.collection.forEach(this.addOne,this);
  },
  addOne: function(model){
    var appointmentView = new AppointmentView({model: model});
    this.$el.append(appointmentView.render().el);
  }
});

Wow, you are a hard worker! Let's see it pay off by rendering our collection view and inserting it into the DOM. Using theappend or html jQuery methods, insert the top-level element into the #app div.

var appointmentsView = new AppointmentListView({collection: appointmentList});
$("#app").append(appointmentsView.render().el);

 

Uh oh. Dr. Goodparts is at it again, adding new models to the collection, and he's upset because when he adds a model, the DOM isn't updated.

In the AppointmentListView's initialize function, listen for the collections add event and call the addOnefunction to append the new model to the view.

Make sure you include the context argument to ensure addOne is called with the correct context.

var AppointmentListView = Backbone.View.extend({
  initialize: function(){
    this.collection.on('add', this.addOne, 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);
  }
});

 

It's Monday morning and time to reset all the appointments for the week. You hear a screech from down the hall and seconds later Dr. Goodparts barges red-faced into your office because the DOM didn't update when he reset the collection.

Update the AppointmentListView to listen for the collection's reset event to call the render function.

Make sure you include the context argument to ensure render is called with the correct context.

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);
  }
});

Turns out one of the appointments in our collection was rescheduled for next week, but when Dr. Goodparts removed the appointment model from the collection, it wasn't removed from the DOM. You can imagine Dr. Goodparts reaction.

Fix this bug by using a custom event hide on Appointment models.

Update your AppointmentList collection to trigger the hide event on a model when it is removed.

Update your AppointmentView to call the remove function whenever its model fires the hide event.

Appointment_list.js

var AppointmentList = Backbone.Collection.extend({
  model: Appointment,
  initialize: function(){
       this.on('remove', this.hideModel);
  },
  hideModel: function(model){
    model.trigger('hide');
  }
});

Appointment_view.js

var AppointmentView = Backbone.View.extend({
  initialize: function(){
    this.model.on('hide', this.remove, this);
  },
  remove: function(){
    this.$el.remove();
  }
});