什么是木偶布局和区域之间的区别？(What's the difference between

木偶提供了一个名为两个组成部分地区和布局。乍一看，他们似乎提供类似的功能：我的应用程序在页面上的位置来放置子视图，再加上一些额外的事件绑定仙尘。

引擎盖下看，这是相当明确的，每个组件在一个非常不同的方式实现，但我不知道为什么，当我想用一个比其他。打算什么用例的每个组件的呢？

Answer 1:

布局和区域用作非常不同的目的：一个布局是一个类型的视图，但一个区域会显示在你的HTML / DOM对您的视图。的区域可以被用于显示的布局。而且布局也将包含的区域。这将创建一个嵌套层次可以无限扩展。

区域

区域管理时显示一个HTML元素在您的网页上的内容。这通常是一个div或其他“容器”状元件。您对管理区域提供了一个jQuery选择，然后你告诉该地区显示该地区各种骨干网的意见。

<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直接的，这意味着它的目的是使单个模板，并且可以或可以不具有模型（或“项目”）与该模板相关联。

布局和ItemView控件之间的区别在于，一个布局包含的区域。当你定义一个布局，你给它一个模板，但你还可以指定该模板中包含的区域。渲染的布局后，您可以使用显示中定义的区域布局内的其他意见。

<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（不只是木偶的观点）延伸的任何视图类型。

Answer 2:

区域充当视图的容器（他们正在里面所示），而布局充当里面嵌套子视图父视图。

由于布局是ItemView控件本身，它显示的区域内。布局也将包含用于显示其子视图的区域。如果在布局的区域显示的子视图布局自己，他们可以有自己的孩子的意见。因此，布局让你窝意见成树状结构。