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

質問

Marionetteは、以下の2つのコンポーネントを提供しています。 地域 と レイアウト . 一見したところ、これらは似たような機能を提供しているように見えます。私のアプリケーションがサブビューを配置するためのページ上の場所、およびいくつかの追加のイベントバインディングの妖精の粉です。

フードの下を見る を見ると、それぞれのコンポーネントが非常に異なる方法で実装されていることがよくわかりますが、なぜ、そしていつ、どちらかを使いたいのかがよくわかりません。それぞれのコンポーネントはどのような使用ケースを想定しているのでしょうか。

どのように解決するのですか?

レイアウトとリージョンは非常に異なった目的を果たします。レイアウトはビューの一種ですが、リージョンはあなたのためにHTML/DOMにビューを表示します。リージョンはレイアウトを表示するために使われるかもしれません。そして、レイアウトはまた、リージョンを含みます。これは、無限に拡張できるネストされた階層を作成します。

リージョン

領域は、ウェブページの 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 を直接継承しています。つまり、単一のテンプレートをレンダリングすることを意図しており、そのテンプレートに関連付けられたモデル（または "アイテム")を持つかどうかということです。

LayoutとItemViewの違いは、LayoutはRegionを含むということです。Layoutを定義するとき、それにテンプレートを与えますが、テンプレートが含むリージョンも指定します。レイアウトをレンダリングした後、定義されたリージョンを使用して、レイアウト内の他のビューを表示することができます。

<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から拡張された任意のビュータイプ（Marionetteビューだけではありません）を使用して、任意の数のレイアウトとリージョンを一緒にネストすることができます。