Backbone.js(Marionette) - CollectionViewとCompositeView

ItemViewはシンプルだけど、collectionViewとcompositeViewというのがあるので、使い分けを確認する。

参考1：Marionette.jsまとめその3 CompositeView, Layout, Region

CompositeViewは、テンプレートを設定することができるらしい。CollectionViewは、テンプレートを設定できない。では、CollectionViewの一般的使い方を確認します。

CollectionViewの使い方

参考2：Marionette.jsまとめその2 View, ItemView, CollectionView

下記は、上記参考2の引用です。

var FooItemView = Marionette.ItemView.extend({
    template: '#itemTemplate'
});
var FooCollectionView = Marionette.CollectionView.extend({
    el: '#fooList',
    itemView: FooItemView
});

ItemViewをセットして、CollectionViewが紐づくエレメントを指定する感じです。#fooList内に、#itemTemplateがcollectionが保持するModel分出力される感じになります。単純ではあります。

テンプレートをもうひとはさみしたい的な感じに、CompositeViewを使います。

CompositeViewの使い方

下記は、上記参考1の引用です。

var FooItemView = Marionette.ItemView.extend({
    template: '#itemTemplate'
});
var FooCompositeView = Marionette.CompositeView.extend({
    el: '#main',
    itemView: FooItemView,
    itemViewContainer: '#fooList',
    template: '#listTemplate'
});

多分、#listTemplateの中にある、#fooListの中に、collectionが保持するModel数分、FooItemViewを出力されます。そして、#listTempalteが、#mainの中に出力されます。って感じだと思う。

ちなみに、#foolistが、<ul>の場合、ItemViewのtagNameは、"li"にする必要があります。tagNameを設定しないとデフォルトでは、<div>で囲われますので、下記みたいな感じになってしまいます。