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?

Frump

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.

Syncretize

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

Granddaddy

Fiddle fixed. It was referencing raw.github for the marionette dependency. – Granddaddy

nope, still broken, any help with SO question, I am noob @marionette... My api call needs promises..Sulc writes coffee..I dont understand coffee... #24018850 – Gloss

This is not what was asked for; you have moved chairs under room, while the OP specifically wanted to have "rooms and chairs a direct descending of the aprtment composite view" – Crosslet