web-dev-qa-db-fra.com

Quelle est la différence entre une disposition de marionnettes et une région?

Marionette fournit deux composants nommés Regions et Layouts . À première vue, ils semblent fournir des fonctionnalités similaires: un emplacement sur la page où mon application peut placer des sous-vues, ainsi que de la poussière de fée liée à un événement supplémentaire.

Regardant sous le capot , il est assez clair que chaque composant est implémenté d'une manière très différente, mais je ne sais pas pourquoi et quand je voudrais utiliser l'un sur l'autre. À quels cas d'utilisation chaque composant est-il destiné?

backbone.jsmarionette
77
Brant Bobby

Les mises en page et les régions ont des objectifs très différents: une mise en page est un type de vue, mais une région affichera une vue dans votre HTML/DOM pour vous. Une région peut être utilisée pour afficher une disposition. Et une mise en page contiendra également des régions. Cela crée une hiérarchie imbriquée qui peut s'étendre à l'infini.

Région

Une région gère le contenu affiché dans un élément HTML de votre page Web. Il s'agit souvent d'un div ou d'un autre élément de type "conteneur". Vous fournissez un sélecteur jquery pour la région à gérer, puis vous dites à la région d'afficher diverses vues de dorsale dans cette région.

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


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

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

Une région n'est donc pas directement restituée et n'a pas ses propres interactions ou mises à jour DOM. C'est uniquement dans le but d'afficher une vue à un point spécifié dans le DOM, ce qui permet d'échanger facilement différentes vues entre elles.

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

Disposition

Une mise en page est un type de vue spécialisé. Il s'étend de Marionette.ItemView directement, ce qui signifie qu'il est destiné à rendre un seul modèle et peut ou non avoir un modèle (ou "élément") associé à ce modèle.

La différence entre une présentation et une ItemView est qu’une présentation contient des régions. Lorsque vous définissez une mise en page, vous lui donnez un modèle, mais vous spécifiez également les régions que le modèle contient. Après avoir rendu la présentation, vous pouvez afficher d'autres vues dans la présentation à l'aide des régions définies.

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

Régions et dispositions ensemble

Vous pouvez déjà voir que les dispositions et les régions sont liées, bien qu'elles fournissent des fonctionnalités distinctes. Mais une présentation et une région peuvent être utilisées ensemble pour créer des sous-présentations et des hiérarchies imbriquées de présentations, de régions et de vues.

<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 imbriquer un nombre illimité de dispositions et de régions, avec un nombre illimité de vues, en utilisant n'importe quel type de vue qui s'étend de Backbone.View (pas seulement les vues de marionnettes).

158
Derick Bailey

Une région sert de conteneur pour les vues (qu'elles sont affichées à l'intérieur), tandis qu'une disposition sert de vue parent pour imbriquer des vues enfant à l'intérieur.

Puisqu'une mise en page est une ItemView elle-même, elle est affichée à l'intérieur d'une région. Une mise en page contiendra également des régions pour afficher ses vues enfant. Si les vues enfant affichées dans les régions d'une mise en page sont des mises en page elles-mêmes, elles peuvent avoir leurs propres vues enfant. Par conséquent, les mises en page vous permettent d'imbriquer des vues dans une structure arborescente.

2
tldr