Marionette 布局和区域有什么区别？

Marionette 提供了两个名为Regions http://derickbailey.github.com/backbone.marionette/#marionette-region and Layouts http://derickbailey.github.com/backbone.marionette/#marionette-layout。乍一看，它们似乎提供了类似的功能：页面上我的应用程序放置子视图的位置，以及一些附加的事件绑定仙尘。

深入探究 http://derickbailey.github.com/backbone.marionette/docs/backbone.marionette.html，很明显，每个组件都是以非常不同的方式实现的，但我不确定为什么以及何时我想要使用其中一个而不是另一个。每个组件的用途是什么？

布局和区域的用途截然不同：布局是一种视图，但区域会在 HTML/DOM 中为您显示视图。区域可用于显示布局。布局还将包含区域。这创建了一个可以无限扩展的嵌套层次结构。

Region

区域管理网页上 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/ http://lostechies.com/derickbailey/2011/12/12/composite-js-apps-regions-and-region-managers/

Layout

布局是一种特殊类型的视图。它延伸自Marionette.ItemView直接，这意味着它旨在渲染单个模板，并且可能有也可能没有与该模板关联的模型（或“项目”）。

Layout 和 ItemView 之间的区别在于 Layout 包含 Region。定义布局时，您为其提供一个模板，但也指定该模板包含的区域。渲染布局后，您可以使用定义的区域显示布局内的其他视图。

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