web-dev-qa-db-de.com

Was ist der Unterschied zwischen einem Marionettenlayout und einer Region?

Marionette bietet zwei Komponenten mit den Namen Regions 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.

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

77
Brant Bobby

Layouts und Regionen dienen ganz unterschiedlichen Zwecken: Ein Layout ist eine Ansichtsart, 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" -artiges 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 hat keine eigenen DOM-Interaktionen oder Aktualisierungen. Es dient lediglich dem Zweck, eine Ansicht an einem bestimmten Punkt im DOM anzuzeigen, sodass verschiedene Ansichten einfach 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 Ansichtsart. Es erstreckt sich von Marionette.ItemView direkt, was bedeutet, dass eine einzelne Vorlage gerendert werden soll und ein Modell (oder "Element") mit dieser Vorlage verknüpft sein kann 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 Regionen an, die die Vorlage enthält. Nach dem Rendern des Layouts können Sie andere Ansichten innerhalb des Layouts mithilfe der definierten Bereiche 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 erkennen, dass Layouts und Regionen zusammenhängen, obwohl sie unterschiedliche 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 verschachteln, wobei Sie einen beliebigen Ansichtstyp verwenden, der sich über Backbone.View erstreckt (nicht nur Marionettenansichten).

158
Derick Bailey

Ein Bereich dient als Container für Ansichten (die darin angezeigt werden), während ein Layout als übergeordnete Ansicht zum Verschachteln von untergeordneten 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. Daher können Sie mit Layouts Ansichten in einer baumartigen Struktur verschachteln.

2
tldr