Ответ 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/
Layout
Макет - это специализированный вид. Он распространяется непосредственно от 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).