【Marionette】CompositeViewをCollectionViewで描画するサンプル


1対Nの関連を持つモデルのコレクションをMarionette.jsで表示する際のサンプルです。ちょっとイメージが湧きにくいので例を挙げると、以下のような感じです。

  • クラス
    • 生徒
    • 生徒
    • 生徒
    • ・・・
  • クラス
    • 生徒
    • 生徒
    • 生徒
    • ・・・
  • ・・・

これをCollectionView,CompositeView,ItemViewを使用して描画します。それぞれのビューが対応するモデル,コレクションは以下の通りです。

  • CollectionView : クラスのコレクション
  • CompositeView : クラスモデル、生徒のコレクション
  • ItemView : 生徒モデル

結果的にMariionette.jsなら簡単に描画できました。コード量がそこそこ多くなってますが、ほとんどがモデルの定義・生成部分であり、本質的なのはビューの定義の箇所だけです。

app.js

index.html

ポイントはapp.jschildViewOptionsです。単純にCompositeViewを使用する場合は特に難しいことはないのですが、CompositeViewがCollectionViewに描画される場合は、このようにchildViewOptionsで子供ビューに渡すmodel,collectionを指定してあげないと上手くいきませんでした。(これに気付くのに結構ハマった・・・)

関連する記事


コメントを残す

メールアドレスが公開されることはありません。

CAPTCHA


このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください