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 (а не лише перегляди маріонеток).
Регіон служить контейнером для подань (що відображаються всередині), тоді як макет служить батьківським видом для вкладання дочірніх подань всередину.
Оскільки макет сам по собі є ItemView, він відображається всередині регіону. Макет також міститиме регіони для відображення його дочірніх поглядів. Якщо дочірні подання, показані в регіонах макета, є самими макетами, вони можуть мати власні дочірні подання. Отже, макети дозволяють вкладати подання у деревоподібну структуру.