78

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

フードの下を見ると、各コンポーネントが非常に異なる方法で実装されていることは明らかですが、なぜ、いつ一方を他方の上に使用する必要があるのか​​ わかりません. 各コンポーネントはどのようなユースケースを想定していますか?

4

2 に答える 2

159

レイアウトとリージョンの目的は大きく異なります。レイアウトはビューの一種ですが、リージョンはHTML/DOMにビューを表示します。領域は、レイアウトを表示するために使用できます。また、レイアウトにはリージョンも含まれます。これにより、無限に拡張できるネストされた階層が作成されます。

領域

リージョンは、WebページのHTML要素内に表示されるコンテンツを管理します。これは多くの場合、divまたはその他の「コンテナ」のような要素です。管理するリージョンにjqueryセレクターを提供してから、そのリージョンにさまざまなバックボーンビューを表示するようにリージョンに指示します。

<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（マリオネットビューだけでなく）から拡張する任意のビュータイプを使用して、任意の数のレイアウトと領域を任意の数のビューとともにネストできます。

于 2012-05-09T18:26:39.980 に答える
2

Region は View のコンテナーとして機能し (それらは内部に表示されます)、Layout はその中に子ビューをネストするための親ビューとして機能します。

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

于 2014-09-05T06:30:40.083 に答える