Marionette предоставляет два компонента с именем Регионы и Макеты. На первый взгляд они, похоже, предоставляют аналогичную функциональность: местоположение на странице моего приложения для размещения подпунктов, а также дополнительную дополнительную привязку к событиям.
Подглядывая под капот, довольно ясно, что каждый компонент реализован совсем по-другому, но я не уверен, почему и когда я захочу использовать один над другим. В каких случаях используются каждый компонент?
Макеты и регионы служат в самых разных целях: макет - это тип вида, но регион отобразит представление в вашем 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).
Регион служит контейнером для представлений (они показаны внутри), а макет служит в качестве родительского представления для размещения в нем дочерних представлений.
Поскольку макет - это элемент ItemView, он отображается внутри региона. Макет также будет содержать регионы для отображения его дочерних представлений. Если представления детей, показанные в макетах, являются макетами сами, они могут иметь собственные представления для детей. Следовательно, макеты позволяют вставлять представления в древовидную структуру.