人偶布局和地区有什么区别？

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

outlook未来 ，很明显，每个组件都以一种完全不同的方式实现，但是我不确定为什么以及何时使用这个组件。 每个组件的用途是什么？

Answer 1

布局和区域的用途非常不同：布局是一种视图，但区域会在您的HTML / DOM中显示一个视图。 区域可以用于显示布局。 一个布局也将包含区域。 这创build了一个可以无限扩展的嵌套层次结构。

地区

地区pipe理在网页上的HTML元素中显示的内容。 这通常是一个div或其他像容器一样的“容器”。 您提供了一个jqueryselect器来pipe理该区域，然后告诉该区域在该区域显示各种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/

布局

布局是一种特殊types的视图。 它直接从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()); 

地区和布局一起

您已经可以看到Layouts和Regions是相关的，尽pipe它们提供了独立的function。 但是布局和区域可以一起使用来创build布局，区域和视图的子布局和嵌套层次结构。

 <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视图）扩展的视图types，将任意数量的布局和区域与任意数量的视图一起嵌套。

Answer 2

一个Region作为Views的容器（它们被显示在里面），而一个Layout作为一个父视图来嵌套子视图。

由于布局是一个ItemView本身，它显示在一个区域内。 布局还将包含用于显示其子视图的区域。 如果布局的区域中显示的子视图本身是布局，则它们可以具有其自己的子视图。 因此，布局让您将视图embedded树状结构中。