Quelle est la différence entre une Marionnette de Mise en page et d'une Région?

Question

Marionnette fournit deux composants nommé Régions et les Mises en page. À première vue, ils semblent fournir des fonctionnalités similaires: Un emplacement sur la page de mon application à la place des sous-vues, ainsi que d'autres événements de liaison de poussière de fée.

Regarder sous le capot, il est assez évident que chaque composant est mis en œuvre dans une manière très différente, mais je ne suis pas sûr de savoir pourquoi et quand je veux utiliser l'un sur l'autre. Ce cas d'utilisation sont chaque composant destiné?

Answer 1

Les mises en page et les Régions servir à des fins très différentes: une mise en page est un type de vue, mais d'une région se l'afficher dans votre code HTML/DOM pour vous. Une région peut être utilisé pour afficher la mise en page. Et une mise en page contiendra également les régions. Cela crée une hiérarchie qui peut s'étendre à l'infini.

Région

Une Région gère le contenu qui est affiché à l'intérieur d'un élément HTML sur votre page web. C'est souvent un div ou autre "conteneur" comme élément. Vous fournir un sélecteur jquery pour la région à gérer, et puis vous dire à la région d'afficher différentes vues Dorsale de la région.

<div id="mycontent"></div>

MyRegion = new Backbone.Marionette.Region({
  el: "#mycontent"
});

myView = new MyView();
myRegion.show(myView);

Une région, alors, n'est pas directement rendus et ne dispose pas de ses propres interactions DOM ou mise à jour. C'est uniquement dans le but d'afficher un point de vue à un point spécifié dans les DOM, permettant à différents points de vue à être échangés à l'intérieur et à l'extérieur, facilement.

Vous pouvez en lire plus sur les Régions, ici: http://lostechies.com/derickbailey/2011/12/12/composite-js-apps-regions-and-region-managers/

Mise en page

Un modèle est un type spécialisé de vue. Il s'étend de l' Marionette.ItemView directement, ce qui signifie qu'il est destiné à effectuer le rendu d'un modèle unique et peut ou peut ne pas avoir un modèle (ou "article") associé à ce modèle.

La différence entre un modèle et un ItemView est qu'une Mise en page contient des Régions. Lorsque vous définissez une Mise en page, vous lui donnez un modèle, mais vous pouvez également spécifier les régions que le modèle contient. Après avoir rendu la mise en page, vous pouvez afficher d'autres points de vue dans la mise en page à l'aide de la régions qui ont été définis.

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

Les Régions Et Les Présentations D'Ensemble

Vous pouvez déjà voir que les Mises en page et les Régions sont liées, même si elles fournissent fonctionnalité distincte. Mais d'une Disposition et d'une Région peuvent être utilisés ensemble pour créer des sous-mises en page et des hiérarchies imbriquées de mises en page, des régions et de points de vue.

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

Vous pouvez inclure n'importe quel nombre de mises en page et les régions, avec un certain nombre de points de vue, à l'aide de tout type de vue qui s'étend de l'épine Dorsale.Vue (et pas seulement de la Marionnette de vues).

Answer 2

Une Région qui sert de conteneur pour les Vues (qu'elles soient affichées à l'intérieur), tandis qu'une Mise en page sert une vue parent pour la nidification de l'enfant vues de l'intérieur.

Depuis une Mise en page est un ItemView lui-même, il est indiqué à l'intérieur d'une Région. Un modèle contient également des Régions pour montrer son enfant vues. Si l'enfant vues montrées dans une Mise en page de la région sont Mises en eux-mêmes, ils peuvent avoir de l'enfant du point de vue de leur propre. Par conséquent, les Mises en page vous permettent de nid de vues dans une structure arborescente.