web-dev-qa-db-ja.com

マリオネットレイアウトとリージョンの違いは何ですか？

Marionetteは、 Regions および Layouts という2つのコンポーネントを提供します。一見したところ、同様の機能を提供しているように見えます。サブビューを配置するためのアプリケーションのページ上の場所に加えて、フェアリーダストをバインドする追加のイベントです。

フードの下を見る 、各コンポーネントが非常に異なる方法で実装されていることはかなり明白ですが、なぜ、いつ他のコンポーネントを使用したいのかわかりません。各コンポーネントの用途は何ですか？

backbone.jsmarionette
77
Brant Bobby

レイアウトとリージョンの目的は大きく異なります。レイアウトはビューの一種ですが、リージョンは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（マリオネットビューだけでなく）から拡張される任意のビュータイプを使用して、任意の数のビューで、任意の数のレイアウトと領域を一緒にネストできます。

158
Derick Bailey

リージョンはビュー（内部に表示される）のコンテナとして機能し、レイアウトはその内部に子ビューをネストするための親ビューとして機能します。

レイアウトはItemViewそのものなので、リージョン内に表示されます。レイアウトには、子ビューを表示するためのリージョンも含まれます。レイアウトのリージョンに表示される子ビューがレイアウト自体である場合、独自の子ビューを持つことができます。したがって、レイアウトを使用すると、ビューをツリーのような構造にネストできます。

2
tldr