Pocket
LINEで送る

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>で囲われますので、下記みたいな感じになってしまいます。

<ul><div>hoge</div>....</ul>
Pocket
LINEで送る


コメントください

関連記事

プログラミング

cakePHP2 – 多言語化

多言語化します。 cakephpマニュアルのこのページに説明が書いてあ 続きを読む …

プログラミング

Go言語によるビットコインのフルノード実装btcdを調べる(2)

btcdを実行した際のプログラムの流れを最初から確認してみます。 se 続きを読む …

%d人のブロガーが「いいね」をつけました。