Question

Marionette提供了两个名为Regions和Layouts的组件。乍一看，它们似乎提供了类似的功能：页面上我的应用程序放置子视图的位置，以及一些额外的事件绑定仙尘。

Looking under the hood，相当清楚的是，每个组件都以非常不同的方式实现，但我不确定为什么以及何时我想要使用其中一个。每个组件用于哪些用例？

Answer 1

布局和区域的用途非常不同：布局是一种视图，但区域将为您显示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延伸，这意味着它旨在呈现单个模板，并且可能有也可能没有与该模板关联的模型（或“项目”）。

布局和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扩展的任何视图类型（不仅仅是Marionette视图），您可以使用任意数量的视图将任意数量的布局和区域嵌套在一起。

Answer 2

区域用作视图的容器（它们在内部显示），而布局用作在其中嵌套子视图的父视图。

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

木偶布局和区域之间有什么区别？

2 个答案:

区域

布局

区域和布局