ポートフォリオ型のサイトを作っています。プロジェクト ページには、プロジェクトとギャラリーに関する一般的な情報が表示されます。
分割したので、プロジェクトページはマリオネットレイアウトです。このレイアウトは、プロジェクトに関する情報を独自のテンプレート内にレンダリングし、ギャラリー領域を備えています。この領域にギャラリー複合ビューを追加したいと考えています。これには、大きな画像とサムネイルのリストが含まれます。
プロジェクトのレイアウト
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 ギャラリー ビューを宣言していました。順序を変更すると、すべてが修正されました。ありがとう