В чем разница между макетом марионетки и регионом?

марионетка предоставляет два компонента с именем регионы и макеты. На первый взгляд, они, похоже, обеспечивают аналогичную функциональность: место на странице для моего приложения для размещения подвидов, а также некоторые дополнительные события, связывающие fairy dust.

глядя под капот, это довольно ясно, что каждый компонент реализован совсем по-другому, но я не уверен, почему и когда я хотел бы использовать один над другим. Какие варианты использования каждый компонент предназначен для?

2 77
backbone.js marionette

2 ответа:

макеты и регионы служат очень разным целям: макет-это тип представления, но регион будет отображать представление в вашем HTML/DOM для вас. Область может использоваться для отображения макета. И макет также будет содержать регионы. Это создает вложенную иерархию, которая может расширяться бесконечно.

края

область управляет содержимым, которое отображается в HTML-элементе на веб-странице. Это часто div или другой "контейнер" как элемент. Вы предоставляете jquery селектор для региона для управления, а затем вы говорите региону, чтобы показать различные виды магистрали в этом регионе.

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

вы можете вложить любое количество макетов и областей вместе с любым количеством представлений, используя любой тип представления, который простирается от магистрали.Вид (не только вид марионетки).

158

область служит контейнером для представлений (что они показаны внутри), в то время как макет служит родительским видом для вложения дочерних представлений внутри него.

поскольку макет сам по себе является ItemView, он отображается внутри области. Макет также будет содержать области для отображения его дочерних представлений. Если дочерние представления, показанные в областях макета, являются самими макетами, они могут иметь собственные дочерние представления. Таким образом, макеты позволяют вложить представления в древовидную структуру.

2