Was ist der Unterschied zwischen einem Marionetten-Layout und einer Region?

Layouts und Regionen dienen sehr unterschiedlichen Zwecken: ein layout ist eine Art von Blick, aber eine region, zeigt ein Blick in Ihre HTML - /DOM für Sie. Eine region kann verwendet werden, um ein layout anzuzeigen. Und ein layout auch Regionen enthalten. Dies erzeugt eine geschachtelte Hierarchie, erweitern zu können, unendlich.

Region

Einer Region, verwaltet den Inhalt, der angezeigt wird, innerhalb einer HTML-element auf Ihrer web-Seite. Dies ist oft ein div oder anderen "container" - element. Sie bieten ein jquery-selector für die region zu verwalten, und dann muss man sagen, die region zu zeigen Backbone-verschiedenen Ansichten in dieser region.

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

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

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

Einer region, dann wird nicht direkt berechnet und nicht über einen eigenen DOM-Interaktionen oder zu aktualisieren. Es ist rein für den Zweck der Darstellung eine Ansicht auf einen bestimmten Punkt, in den DOM, so dass verschiedene Ansichten ausgetauscht werden, in und out, ganz einfach.

Lesen Sie mehr über die Regionen, hier: http://lostechies.com/derickbailey/2011/12/12/composite-js-apps-regions-and-region-managers/

Layout

Einem Layout ist eine spezielle Art von view. Es erstreckt sich von Marionette.ItemView direkt, was bedeutet, es ist bestimmt so Rendern Sie ein einzelnes template und kann oder kann nicht ein Modell (oder "Element") im Zusammenhang mit dieser Vorlage.

Den Unterschied zwischen einem Layout und einer ItemView ist, dass ein Layout enthält Regionen. Wenn Sie ein Layout zu definieren, geben Sie es ein template aber Sie auch Regionen angeben, die die Schablone enthält. Nach der Darstellung des Layouts können Sie die Darstellung anderer Ansichten innerhalb der layout über die Regionen definiert wurden.

<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

Kann man bereits sehen, dass Layouts und Regionen verbunden sind, obwohl Sie getrennte Funktionen. Aber eine Layout-und eine Region, die zusammen verwendet werden können zum erstellen von sub-layouts und verschachtelten Hierarchie von layouts, Regionen und Ansichten.

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

Schachteln Sie eine beliebige Anzahl von layouts und Regionen zusammen, mit beliebiger Anzahl von Ansichten, die mit jeder Ansicht Typ, der sich von Rückgrat.Ansicht (und nicht nur Marionette Ansichten).

InformationsquelleAutor der Antwort Derick Bailey