마리오네트 레이아웃과 지역의 차이점은 무엇입니까?

마리오네트 레이아웃과 지역의 차이점은 무엇입니까?

---

Marionette는 Regions 및 Layouts 라는 두 가지 구성 요소를 제공합니다 . 언뜻보기에는 비슷한 기능을 제공하는 것 같습니다. 내 응용 프로그램이 하위보기를 배치 할 페이지의 위치와 일부 추가 이벤트 바인딩 요정 먼지.

내부를 살펴보면 각 구성 요소가 매우 다른 방식으로 구현된다는 것이 상당히 분명하지만, 왜 그리고 언제 다른 구성 요소를 사용하고 싶은지 잘 모르겠습니다. 각 구성 요소의 용도는 무엇입니까?

---

레이아웃과 영역은 매우 다른 용도로 사용됩니다. 레이아웃은보기 유형이지만 영역은 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());

Backbone.View에서 확장되는 모든보기 유형을 사용하여 원하는 수의보기와 함께 원하는 수의 레이아웃과 영역을 중첩 할 수 있습니다 (Marionette보기뿐 아니라).

---

영역은 내부에 표시되는 뷰의 컨테이너 역할을하며 레이아웃은 내부에 하위 뷰를 중첩하기위한 상위 뷰 역할을합니다.

레이아웃은 ItemView 자체이므로 지역 내부에 표시됩니다. 레이아웃에는 하위보기를 표시하기위한 영역도 포함됩니다. 레이아웃의 영역에 표시된 자식보기가 레이아웃 자체 인 경우 자체 자식보기를 가질 수 있습니다. 따라서 레이아웃을 사용하면 뷰를 트리와 같은 구조로 중첩 할 수 있습니다.

참고URL : https://stackoverflow.com/questions/10521266/whats-the-difference-between-a-marionette-layout-and-a-region