backbone.js - Nested collections with Backbone.Marionette

Question

I want to create a calendar which is a day collection, and every day is a collection of appointments. The structure of day object is:

day:{
    date:'08-06-2012',
    appointment: {
        time_begin:'12:55',
        time_end: '16:40',
        customer: 'Jaime'
    }
}

At this moment i have this models and views:

// CALENDAR COLLECTION
App.Calendar.Collection = Backbone.Collection.extend({
    // MODEL
    model: App.Day.Model
}

When calendar collection fetch data form the server, it gets complete day objects including appointments.

// CALENDAR VIEW
App.Calendar.View = Backbone.Marionette.CompositeView.extend({
    // TEMPLATE
    template: Handlebars.compile(templates.find('#calendar-template').html()),
    // ITEM VIEW
    itemView: App.Day.View,
    // ITEM VIEW CONTAINER
    itemViewContainer: '#calendar-collection-block'
});

// DAY MODEL
App.Day.Model = Backbone.Collection.extend({
    // PARSE
    parse:function(data){
        console.log(data);
        return data;
    }
});

// DAY VIEW
App.Day.View = Backbone.Marionette.CompositeView.extend({
    collection: App.Day.Model,
    itemView: App.CalendarAppointment.View, //---->I NEED TO DEFINE THIS, NOT SURE HOW
    template: Handlebars.compile(templates.find('#day-template').html())
});

The day model needs to be a collection of appointments and shouldn't be necessary to fetch data from the server because it's inside every day.

How can i do this?

Answer 1

if I understand the question right, you're asking how to get the data from your Day model, Appointment collection, in to the CalendarApointmentView itemView?

Your Day.View can be set up to populate the collection of this composite view, which will then be pushed in to the item views:

// DAY VIEW
App.Day.View = Backbone.Marionette.CompositeView.extend({
    collection: App.Day.Model,
    itemView: App.CalendarAppointment.View,
    template: Handlebars.compile(templates.find('#day-template').html()),

    initialize: function(){

      // since `this.model` is a `Day` model, it has the data you need
      this.collection = this.model.get("CalendarAppointments");

    }
});

One thing to note: the this.collection must be a valid Backbone.Collection. If your model stores the appointment data as a simple array, then you need to do this:

var appointments = this.model.get("CalendarAppointments");
this.collection = new AppointmentCollection(appointments);

Hope that helps.