在布局区域内使用Marionette Compositeview

我正在创建一个投资组合类型网站。项目页面显示有关项目和画廊的一般信息。在布局区域内使用Marionette Compositeview

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

项目布局

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

画廊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被初始化两次。

任何方向将不胜感激，谢谢。

Imgur

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

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

第二个错误是在我的代码中的缩略图指示视图之前声明我的CompositeView图库视图。更改订单确定了一切。谢谢

来源

2013-08-06 michael

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

来源

2013-08-06 05:08:51

在布局区域内使用Marionette Compositeview

回答

相关问题