在布局区域中使用Marionette Compositeview

Question

我正在创建一个投资组合类型的网站。项目页面显示有关项目和图库的一般信息。

我把它拆分了，所以项目页面是Marionette 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'

图库项目视图

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'

当我将模型和集合传递给复合视图时，我得到下面的错误，但是当我只传递模型时，它只是没有拇指渲染就好了。我怎么设置我的复合视图都没有错。

奇怪的是GalleryCompositeView被初始化了两次。

任何方向都会受到赞赏，谢谢。

修改 原来在那里有两个问题，感谢daivd指出收集问题，我只是传入一个数组或图像路径。这是我的修复

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

第二个错误是在缩略图视图之前在我的代码中声明了我的CompositeView库视图。改变订单修复一切。感谢

Answer 1

您的收藏中的数据似乎存在问题。将@model.get('images')和@galleryCollection（来自initialize方法）转储到控制台，并确保所有包含的模型都具有src属性。