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 assume that we have an apartment (represented as a composite view), and the apartment contains a collection of rooms and a collection of chairs, what we want to do is have the rooms and chairs a direct descending of the aprtment composite view, how can we do this, knowing that the composite view can only have one child collection, should we be using regions?

Answer 1

Have you tried using a Layout instead? it supports regions and an itemview (if needed). The way I am using this is to define several regions in the layout; show a collection view or item view in each region and any other apartment stuff in the layout template. so, for your example, your apartment layout would contain all of the apartment attributes, and a chairs region would contain a chairs collection view, and a rooms region could contain a rooms collection view.

Answer 2

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

<div id="apartments"></div>

<script type="text/html" id="appartment">
    <div>
        <h2>Apartment: <%=apartment%></h2>
        <ul></ul>
    </div>
</script>

<script type="text/html" id="room">
    <h3><%=name%></h3>
    <ul></ul>
</script>

<script type="text/html" id="chair">
    <b><%=chairType%></b>
</script>   

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);