Using Marionette Compositeview within a Layout region

Question

I'm creating a portfolio type site. The project page shows general information about the project and a gallery.

I've split it up, so the project page is a Marionette Layout. This layout renders information about the project within its own template and has a gallery region. I want to add a gallery composite view to this region. This will have a large image and a list of thumbnails.

Project Layout

ProjectView = Backbone.Marionette.Layout.extend
    template: '#ProjectView'
    className: 'project__item'

    events: {
        'click .close-project': 'closeProject'
        'click #next': 'navigateProject'
        'click #prev': 'navigateProject'
    }

    regions: {
        gallery: ".left"
    }

    initialize: ->
        @galleryCollection = new GalleryCollection @model.get('images')

    onRender: ->
        @galleryView = new GalleryCompositeView { model: @model, collection: @galleryCollection }
        @gallery.show @galleryView

Gallery CompositeView

GalleryCompositeView = Backbone.Marionette.CompositeView.extend
    template: '#gallery__composite'
    itemView: GalleryItemView
    itemViewContainer: '.thumbs'
    className: 'project__gallery'

    initialize: ->
        console.log 'new GalleryCompositeView'

Gallery Item View

GalleryItemView = Backbone.Marionette.ItemView.extend
    tagName: 'li'
    className: 'gallery__item'

    template: _.template '''
        <div class="loading">LOADING<span class="icon-loading"></span></div>
        <div class="image"></div>
    '''

    initialize: ->
        console.log 'new GalleryItemView'

When I pass both the model and the collection to the composite view I get the error below, but when I pass just the model, it renders fine just without the thumbs. I can't see anything wrong with how I have setup my composite view.

Its strange that GalleryCompositeView is being initialised twice.

Any direction would be appreciated, thanks.

Imgur

Edit Turns out there where two issues, thanks daivd for pointing out the collection issue, I was just passing in an array or image paths. This was my fix

        images = []
        _.each @model.get('images'), ( el ) -> images.push { src: el }
        @galleryCollection = new GalleryCollection images

The second error was declaring my CompositeView gallery view in my code before the thumb nail views. Changing the order fixed everything. Thanks

David Sulc David Sulc · Accepted Answer · 2013-08-06T05:08:51

There seems to be a problem with the data in your collection. Dump @model.get('images') and @galleryCollection (from the initialize method) to the console and make sure all of the contained models have an src property.

Using Marionette Compositeview within a Layout region

1 Answers