[MarionetteJS→React 003] 連絡先を
    リストで表示

このエントリーをはてなブックマークに追加

スクリーンショット 2015-07-31 23.37.49

MarionetteJS

コードの差分はこちら
さて、だんだん登場人物が多くなってきました。

  • LayoutView
    その名の通り、レイアウトを決めれるViewです。自分が管理しているRegion内に別のViewを配置することが可能。もちろん、LayoutViewをさらにネストすることもできるので、結構なんでもありなViewです。
  • CollectionView
    コレクションを表示するためのView。例えばリストであれば、そのリスト自体がCollectionViewです。
  • ItemView
    ItemView自体はただのView(って言ったら語弊がありますが)ですが、CollectionViewの子Viewとして使えます。なのでリストの中の各々の要素としてItemViewを使うことができます
  • Collection
    ざっくり言うと実際にサーバなりと通信してModel郡を束ねることができるのがCollectionです。どんなModelを使うかというのをmodel属性で指定できます。
  • Model
    サーバなりと通信する最小単位のModel。(いい加減な説明。。。)

ここではCollectionViewにCollectionを指定して、CollectionViewのchildviewとなるItemViewがModelと対応するようになるんです。
イメージ的にはこんな感じ↓

marionette→react_003

なんだか変に登場人物が多すぎる予感がするのは私だけでしょうか。。。

ReactJS

同様の画面をReactで書くと、今までルートのComponentだったContactManagerはとっておくとして、その中にContactList Componentを挿入するイメージかと思います。登場人物は変わらず、Componentが増えただけです。
marionette→react_003_2
ちょっと図が極端にシンプルなので不公平な印象があるかもしれませんが、要するにはこういうことだと思うんです。Componentが何をどうやって表示しているかはとにかくそのComponentを見ればよし!他に依存しているViewやModelの実装とかを見る必要はないんです。(今のところは、きっと)

こちらがContactList Componentのコード。

うん、やっぱり見通しがいい気がします。

コードの差分はこちらで確認できます。

Written on July 31, 2015
このエントリーをはてなブックマークに追加