木偶提供了两个名为Regions和Layouts的组件。乍一看，它们似乎提供了类似的功能：页面上供我的应用程序放置子视图的位置，以及一些其他的事件绑定精灵尘埃。
从内幕看，很明显每个组件的实现方式都非常不同，但是我不确定为什么以及何时要使用一个组件。每个组件打算用于哪些用例？
Answers:
布局和区域的用途截然不同：布局是一种视图类型，但是区域将为您显示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扩展的任何视图类型（不仅限于木偶视图）将任意数量的布局和区域与任意数量的视图嵌套在一起。