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

ギャラリー 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 が 2 回初期化されているのは奇妙です。

どんな方向でも感謝します、ありがとう。

イムグル

編集 コレクションの問題を指摘してくれたdaivdに感謝します.2つの問題があることがわかりました。私は配列または画像パスを渡していました。これは私の修正でした

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

2 番目のエラーは、サムネイル ビューの前にコードで CompositeView ギャラリー ビューを宣言していました。順序を変更すると、すべてが修正されました。ありがとう

4

1 に答える 1