backbone collection won't empty on reset

Question

I have a calendar day model, and in each calendar day, I have a collection of events.

If the day has events, the collection is refreshed, no problem, I show the new events. However, if the day has no events, the collection isn't being emptied, and the collection still shows the events from the day which was the last model (previous day if the user went to next day).

I've got the collection being created in the fetch success of the model, so it shouldn't be an async issue.

My model is

Myapp.Models.CalDay = Backbone.Model.extend({
    url:'calendar',
    initialize: function(){

        this.get_cal();
        },
    get_cal: function(){

        //calendar doesn't exist, so first time through,
            Myapp.CurrentCal = this;
            Myapp.cal.set({'date': new Date(),'draw_slider': true,'put_date':'today'});
            Myapp.CurrentCal.Events = new Myapp.Collections.DayEvents();
            this.bind('change:date',this.fetch_cal);
            this.fetch_cal();
        } 

        Myapp.CurrentCal.bind("fetched",this.get_view);
    },

    fetch_cal: function(){

        console.log(Myapp.CurrentCal.Events);

        Myapp.Calendar.fetch({
        success: function(response) {

            Myapp.CurrentCal.Events.reset(response.attributes.calendar_events);
            Myapp.CurrentCal.trigger("fetched");
                },
          error: function() {
              alert('error getting calendar');
            }
        });


    },
    get_view: function(){
          console.log(Myapp.CurrentCal.Events);
          new Myapp.Views.CalendarDay();

    }
});

Answer 1

As documentation says calling reset without passing any models as argument will empty collection. So for all the days where there are no events you need to call reset without passing models as an argument or return empty array from the server as you said.

And / Or you can make a check for response in the success callback and based on the conditions call either

Myapp.CurrentCal.Events.reset(response.attributes.calendar_events);

or

Myapp.CurrentCal.Events.reset();

Answer 2

You need to call remove() your view before (well, I'd sugest before) rendering the next days events.

This in the case where you render a new days with events this is not causing you issues because the container of the view is being over written with these events. However, in the case where the next day contains zero new events, nothing is written and hence you are left with the previous days events still being displayed.

Consider creating a close method for your view and along with executing the remove() function on the view also clean up any binding you have associated with that view.

I have been creating a config/backone.coffee for my backbone apps and creating a close() function to accomplish this:

class Backbone.View extends Backbone.View
  close: ->
    @beforeClose() if @beforeClose?
    @remove()
    @unbind(null,null,this)