Marionetteは、 Regions および Layouts という2つのコンポーネントを提供します。一見したところ、同様の機能を提供しているように見えます。サブビューを配置するためのアプリケーションのページ上の場所に加えて、フェアリーダストをバインドする追加のイベントです。
フードの下を見る 、各コンポーネントが非常に異なる方法で実装されていることはかなり明白ですが、なぜ、いつ他のコンポーネントを使用したいのかわかりません。各コンポーネントの用途は何ですか?
レイアウトとリージョンの目的は大きく異なります。レイアウトはビューの一種ですが、リージョンはHTML/DOMでビューを表示します。領域を使用してレイアウトを表示できます。また、レイアウトにはリージョンも含まれます。これにより、無限に拡張できるネストされた階層が作成されます。
リージョンは、WebページのHTML要素内に表示されるコンテンツを管理します。多くの場合、これはdivまたはその他の「コンテナ」のような要素です。管理するリージョンにjqueryセレクターを提供し、そのリージョンでさまざまなBackboneビューを表示するようにリージョンに指示します。
<div id="mycontent"></div>
MyRegion = new Backbone.Marionette.Region({
el: "#mycontent"
});
myView = new MyView();
myRegion.show(myView);
したがって、リージョンは直接レンダリングされず、独自のDOMインタラクションまたは更新もありません。これは純粋に、DOM内の指定されたポイントにビューを表示することを目的としており、さまざまなビューを簡単に交換できます。
リージョンの詳細については、こちらをご覧ください: http://lostechies.com/derickbailey/2011/12/12/composite-js-apps-regions-and-region-managers/
レイアウトは、特殊なタイプのビューです。 Marionette.ItemView
直接、つまり単一のテンプレートをレンダリングすることを意図しており、そのテンプレートに関連付けられたモデル(または「アイテム」)を持つ場合と持たない場合があります。
レイアウトとItemViewの違いは、レイアウトにリージョンが含まれていることです。レイアウトを定義するときにテンプレートを指定しますが、テンプレートに含まれるリージョンも指定します。レイアウトをレンダリングした後、定義された領域を使用して、レイアウト内に他のビューを表示できます。
<script id="my-layout" type="text/html">
<h2>Hello!</h2>
<div id="menu"></div>
<div id="content"></div>
</script>
MyLayout = Backbone.Marionette.Layout.extend({
template: "#my-layout",
regions: {
menu: "#menu",
content: "#content"
}
});
layout = new MyLayout();
layout.render();
layout.menu.show(new MyMenuView());
layout.content.show(new MyContentView());
レイアウトとリージョンは別々の機能を提供しますが、関連していることはすでに確認できます。ただし、レイアウトとリージョンを一緒に使用して、レイアウト、リージョン、ビューのサブレイアウトとネストされた階層を作成できます。
<script id="my-layout" type="text/html">
<h2>Hello!</h2>
<div id="menu"></div>
<div id="content"></div>
</script>
<div id="container"></div>
container = new Backbone.Marionette.Region({
el: "#container"
});
MyLayout = Backbone.Marionette.Layout.extend({
template: "#my-layout",
regions: {
menu: "#menu",
content: "#content"
}
});
// Show the "layout" in the "container" region
layout = new MyLayout();
container.show(layout);
// and show the views in the layout
layout.menu.show(new MyMenuView());
layout.content.show(new MyContentView());
Backbone.View(マリオネットビューだけでなく)から拡張される任意のビュータイプを使用して、任意の数のビューで、任意の数のレイアウトと領域を一緒にネストできます。
リージョンはビュー(内部に表示される)のコンテナとして機能し、レイアウトはその内部に子ビューをネストするための親ビューとして機能します。
レイアウトはItemViewそのものなので、リージョン内に表示されます。レイアウトには、子ビューを表示するためのリージョンも含まれます。レイアウトのリージョンに表示される子ビューがレイアウト自体である場合、独自の子ビューを持つことができます。したがって、レイアウトを使用すると、ビューをツリーのような構造にネストできます。