Two Collections inside a Composite View

Question

So we are working on a project using marionette and we have made a good progress so far, but we struggling with a part of the marionette nested view model,

so lets assu

Answer 1

You can do this with nested composite views. For the use case you described you could nest a compositeView for your Apartments and Rooms.

Fiddle: http://jsfiddle.net/yCD2m/23/

Markup

JS

var apartments = [
    {apartment: '1a', rooms: [
        {name: 'master bed', chairs: []},
        {name: 'kitchen', chairs: [
            {chairType: 'stool'}, {chairType: 'stool'}]},
        {name: 'living room', chairs: [
            {chairType: 'sofa'}, {chairType: 'love seat'}]}]
    },
    {apartment: '2a', rooms: [
        {name: 'master bed', chairs: []},
        {name: 'kitchen', chairs: [
            {chairType: 'shaker'}, {chairType: 'shaker'}]},
        {name: 'living room', chairs: [
            {chairType: 'sectional'}]}]
    }];

var chairModel = Backbone.Model.extend({});

var roomModel = Backbone.Model.extend({
    initialize: function(attributes, options) {
        this.chairs = new Array();
        _.each(attributes.chairs, function(chair){
          this.chairs.push(new chairModel(chair));    
        }, this);
    }          
});

var ApartmentModel = Backbone.Model.extend({
    initialize: function(attributes, options) {
        this.rooms = new Array();
        _.each(attributes.rooms, function(room){
          this.rooms.push(new roomModel(room));    
        }, this);
    }  
}); 

var ApartmentCollection = Backbone.Collection.extend({
    model: ApartmentModel
});

var ChairView = Backbone.Marionette.ItemView.extend({
    template:'#chair'
});

var RoomView = Backbone.Marionette.CompositeView.extend({
    template: '#room',
    itemViewContainer: 'ul',
    itemView: ChairView,
    initialize: function(){
        var chairs = this.model.get('chairs');
        this.collection = new Backbone.Collection(chairs);
    }
});   

var ApartmentView = Backbone.Marionette.CompositeView.extend({
    template: '#appartment',
    itemViewContainer: 'ul',
    itemView: RoomView,      // Composite View
    initialize: function(){
        var rooms = this.model.get('rooms');
        this.collection = new Backbone.Collection(rooms);
    }
});   

var ApartmentCollectionView = Backbone.Marionette.CollectionView.extend({
    itemView: ApartmentView  // Composite View
});

apartmentCollection = new ApartmentCollection(apartments);

apartmentCollectionView = new ApartmentCollectionView({
    collection: apartmentCollection
});    

App.apartments.show(apartmentCollectionView);