Marionette布局和Region有什么区别？

Question

Marionette布局和Region有什么区别？

backbone.jsmarionette

78

Marionette提供了两个组件，分别是Regions和Layouts。乍一看，它们似乎提供了类似的功能：一个页面上的位置，用于放置子视图，以及一些附加的事件绑定。

深入了解后，很明显每个组件实现方式非常不同，但我不确定为什么以及何时应该使用其中之一。每个组件的使用场景是什么？

- Brant Bobby

2个回答

2

Region（区域）是视图的容器，用于显示其内部的视图；而Layout（布局）则作为父视图，用于将子视图嵌套在其中。

由于Layout本身就是一个ItemView，因此它会显示在Region中。Layout还包含用于显示其子视图的Regions。如果在Layout的Regions中显示的子视图本身就是Layout，则它们可以拥有自己的子视图。因此，Layout允许您将视图嵌套成树形结构。

- tldr

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Derick Bailey · Accepted Answer

布局和区域的作用非常不同：布局是一种视图类型，而区域则会在您的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之间的区别在于，布局包含区域（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 视图），并且可以有任意数量的视图。