Was ist der Unterschied zwischen einem Marionettenlayout und einer Region?

Marionette bietet zwei Komponenten mit den Namen Regionen und Layouts . Auf den ersten Blick scheinen sie ähnliche Funktionen zu bieten: Ein Ort auf der Seite, an dem meine Anwendung Unteransichten platzieren kann, sowie einige zusätzliche Ereignisse, die Feenstaub binden.

Wenn man unter die Haube schaut , ist es ziemlich klar, dass jede Komponente auf eine ganz andere Art und Weise implementiert ist, aber ich bin mir nicht sicher, warum und wann ich eine über der anderen verwenden möchte. Für welche Anwendungsfälle ist jede Komponente vorgesehen?

Layouts und Regionen dienen sehr unterschiedlichen Zwecken: Ein Layout ist eine Art von Ansicht, aber eine Region zeigt eine Ansicht in Ihrem HTML / DOM für Sie an. Eine Region kann verwendet werden, um ein Layout anzuzeigen. Ein Layout enthält auch Regionen. Dadurch wird eine verschachtelte Hierarchie erstellt, die sich unendlich erweitern kann.

Region

Eine Region verwaltet den Inhalt, der in einem HTML-Element auf Ihrer Webseite angezeigt wird. Dies ist oft ein div oder ein anderes "container" ähnliches Element. Sie stellen einen JQuery-Selektor für die zu verwaltende Region bereit und weisen die Region an, verschiedene Backbone-Ansichten in dieser Region anzuzeigen.

<div id="mycontent"></div>

MyRegion = new Backbone.Marionette.Region({
  el: "#mycontent"
});

myView = new MyView();
myRegion.show(myView);

Eine Region wird also nicht direkt gerendert und verfügt nicht über eigene DOM-Interaktionen oder Aktualisierungen. Es dient lediglich dazu, eine Ansicht an einem bestimmten Punkt im DOM anzuzeigen, sodass verschiedene Ansichten problemlos ein- und ausgeblendet werden können.

Weitere Informationen zu Regionen finden Sie hier: http://lostechies.com/derickbailey/2011/12/12/composite-js-apps-regions-and-region-managers/

Layout

Ein Layout ist eine spezielle Art von Ansicht. Es erstreckt sich von Marionette.ItemViewdirekt, was bedeutet, dass eine einzelne Vorlage gerendert werden soll und möglicherweise ein Modell (oder "Element") mit dieser Vorlage verknüpft ist oder nicht.

Der Unterschied zwischen einem Layout und einer ItemView besteht darin, dass ein Layout Regionen enthält. Wenn Sie ein Layout definieren, geben Sie ihm eine Vorlage, geben aber auch Bereiche an, die die Vorlage enthält. Nach dem Rendern des Layouts können Sie mithilfe der definierten Bereiche andere Ansichten innerhalb des Layouts anzeigen.

<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());

Regionen und Layouts zusammen

Sie können bereits sehen, dass Layouts und Regionen miteinander verbunden sind, obwohl sie separate Funktionen bieten. Ein Layout und eine Region können jedoch zusammen verwendet werden, um Unterlayouts und verschachtelte Hierarchien von Layouts, Regionen und Ansichten zu erstellen.

<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());

Sie können eine beliebige Anzahl von Layouts und Regionen mit einer beliebigen Anzahl von Ansichten zusammenschachteln, indem Sie einen beliebigen Ansichtstyp verwenden, der sich von Backbone.View aus erstreckt (nicht nur Marionettenansichten).

Eine Region dient als Container für Ansichten (in denen sie angezeigt werden), während ein Layout als übergeordnete Ansicht zum Verschachteln untergeordneter Ansichten dient.

Da ein Layout selbst eine ItemView ist, wird es in einer Region angezeigt. Ein Layout enthält auch Regionen zum Anzeigen seiner untergeordneten Ansichten. Wenn die in den Regionen eines Layouts angezeigten untergeordneten Ansichten selbst Layouts sind, können sie eigene untergeordnete Ansichten haben. Mit Layouts können Sie Ansichten in eine baumartige Struktur verschachteln.