0

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

我已经把它分开了，所以项目页面是一个木偶布局。此布局在其自己的模板中呈现有关项目的信息，并具有画廊区域。我想向这个区域添加一个画廊复合视图。这将有一个大图像和一个缩略图列表。

项目布局

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

画廊复合视图

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 库视图。更改顺序修复了一切。谢谢

4

1 回答 1

1

您的集合中的数据似乎有问题。转储@model.get('images')和@galleryCollection（从initialize方法）到控制台，并确保所有包含的模型都有一个src属性。

于 2013-08-06T05:08:51.573 回答