In Backbone, how to replace view's model once model is destroyed?

Question

I have a Backbone view that renders a calendar, which in turn renders a sub-view for each day. Each day has a single model and a single click event that either selects or de-selects the day. If a day is selected, the model is saved, and if it's de-selected, the model is destroyed.

Once a view's model is destroyed (because the date was de-selected), I'm not sure how to save a new model in the collection of calendar dates if the date is re-selected. The view only knows about the model — nothing about the collection. Should the calendar view handle creating and attaching a new model to the date view when the model is destroyed? Or should the date view be passed the collection and do that on its own? Or is there a better solution?

Here are some snippets of my code for clarity:

var CalendarView = Backbone.View.extend({
  initialize: function () {
    this.model.dates.on('reset', this.renderDates, this);
  },

  renderDates: function () {
    // Loop through the number of days to display and create a view for each.

      // Find a model for the date. If one doesn't exist, this returns a new model.
      model = this.model.dates.completedOn(date.format('YYYY-MM-DD'));

      view = new DateView({
        model: model
      });

      $dates.append(view.render().el);

    // End loop.
  }
});

var DateView = Backbone.View.extend({
  events: {
    'click .date': 'toggleDate'
  },

  toggleDate: function () {
    if (this.model.selected()) {
      this.model.destroy();
    }
    else {
      this.model.save();
    }
  }
});

Thanks for any help!

Answer 1

Sounds like you should have a set up like this:

1. A Backbone.Model for the selected dates. We'll call this M .
2. A Backbone.Collection to hold all the M models. We'll call this C .
3. A Backbone.View , VM , that represents a single selected date, the model property will be an M .
4. A Backbone.View , VC , to represent a whole month (or year or whatever you're showing), the collection property will be a C .

Then VC can listen for 'add' events on its collection and insert a VM in the appropriate place when a new selected date is added to the C .

Removing an M from a C is also fairly straight forward. Any event on a model will also be triggered on its collection (if it has one). So to unselect a date, simply destroy the model. The VC can listen to 'destroy' events on its collection clean up the VM and its overall display as needed.

This way spend most of your time talking to the collection to manage your selected dates and everything else sorts itself out by responding to the appropriate events.

Here's a quick'n'dirty demo that should show you how the pieces fit together: http://jsfiddle.net/ambiguous/TYMTM/