Nested collections with Backbone.Marionette

backbone.js, marionette

Solution

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.

Problem

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?

Original source