什么是木偶布局和区域之间的区别？ [英] What's the difference between a Marionette Layout and a Region?

问题描述

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

Marionette provides two components named Regions and Layouts. At first glance, they seem to provide similar functionality: A location on the page for my application to place subviews, plus some additional event binding fairy dust.

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

Looking under the hood, it's fairly clear that each component is implemented in a very different way, but I'm not sure why and when I would want to use one over the other. What use cases are each component intended for?

推荐答案

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

Layouts and Regions serve very different purposes: a layout is a type of view, but a region will display a view in your HTML/DOM for you. A region may be used to display a layout. And a layout will also contain regions. This creates a nested hierarchy that can extend infinitely.

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

A Region manages the content that is displayed within an HTML element on your web page. This is often a div or other "container" like element. You provide a jquery selector for the region to manage, and then you tell the region to show various Backbone views in that region.

<div id="mycontent"></div>

MyRegion = new Backbone.Marionette.Region({
  el: "#mycontent"
});

myView = new MyView();
myRegion.show(myView);

一个区域的话，是不直接呈现并且不具有它自己的DOM相互作用或更新。这纯粹是在DOM中的指定点显示视图的目的，允许不同意见，在被换进出，很容易。

A region, then, is not directly rendered and does not have it's own DOM interactions or updating. It is purely for the purpose of displaying a view at a specified point in the DOM, allowing different views to be swapped in and out, easily.

您可以阅读更多关于区域，在这里：<一href=\"http://lostechies.com/derickbailey/2011/12/12/composite-js-apps-regions-and-region-managers/\">http://lostechies.com/derickbailey/2011/12/12/composite-js-apps-regions-and-region-managers/

You can read more about Regions, here: http://lostechies.com/derickbailey/2011/12/12/composite-js-apps-regions-and-region-managers/

一个布局是一种特殊类型的视图。它从 Marionette.ItemView延伸直接的，这意味着它的目的是使单个模板，并且可以或可以不具有一个模型（或项目），与该模板相关联。

A Layout is a specialized type of view. It extends from Marionette.ItemView directly, which means it is intended to render a single template and may or may not have a model (or "item") associated with that template.

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

The difference between a Layout and an ItemView is that a Layout contains Regions. When you define a Layout, you give it a template but you also specify regions that the template contains. After rendering the layout, you can display other views within the layout using the regions that were defined.

<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());

地区和布局一起

您已经可以看到，布局和地区有关系，虽然他们提供单独的功能。但布局和区域可以一起使用，以创建子布局和布局，区域的嵌套层次和看法。

Regions And Layouts Together

You can already see that Layouts and Regions are related, though they provide separate functionality. But a Layout and a Region can be used together to create sub-layouts and nested hierarchies of layouts, regions and views.

<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（不只是木偶的观点）。

You can nest any number of layouts and regions together, with any number of views, using any view type that extends from Backbone.View (not just Marionette views).

这篇关于什么是木偶布局和区域之间的区别？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！