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

Question

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

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

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视图)扩展的任何视图类型,使用任意数量的视图将任意数量的布局和区域嵌套在一起.