Marionette Layout 和 Region 有什么区别？

布局和区域的用途非常不同：布局是一种视图，但区域会在 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 包含 Regions。当你定义一个布局时，你给它一个模板，但你也指定模板包含的区域。渲染布局后，您可以使用已定义的区域显示布局内的其他视图。

<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 视图）将任意数量的布局和区域以及任意数量的视图嵌套在一起。

---

Region 充当 Views 的容器（它们显示在里面），而 Layout 充当父视图，用于在其中嵌套子视图。

由于 Layout 本身就是一个 ItemView，所以它显示在一个 Region 内。布局还将包含用于显示其子视图的区域。如果 Layout 的 Regions 中显示的子视图是 Layouts 本身，它们可以有自己的子视图。因此，布局允许您将视图嵌套到树状结构中。

---