Kukla iki bileşen Regions Layouts adında sağlar. İlk bakışta, benzer bir işlevsellik sağlayan gibiler: başvurum subviews, artı bazı ek olay peri tozu bağlama yerleştirmek için sayfada Bir yer.

Looking under the hood Her bir bileşen çok daha farklı bir şekilde uygulanır oldukça açık, ama diğer üzerinde kullanmak isterdim neden emin değilim. Kullanım durumları için bileşen amaçlanan nedir?

Düzenleri ve Bölgelerde çok farklı amaçlara hizmet eder: bir düzeni görünümünde bir tür, ama sizin için HTML/DOM bir görünümde bir bölgedir. Bir bölge düzeni görüntülemek için kullanılabilir. Ve düzeni bu bölgeler içerir. Bu sonsuz uzatabilirsiniz iç içe bir hiyerarşi oluşturur.

Bölge

Bölge web sayfasında bir HTML öğesi içinde görüntülenen içeriği yönetir. Bu genellikle bir div veya "" element. kap başka bir şey değildir Bölge için bir jquery seçici yönetmek için sağlamak, ve daha sonra bu bölgede çeşitli Omurga görünümü bölgenin söyle.

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

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

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

Bir bölge, o zaman, doğrudan işlenir ve kendi DOM etkileşimleri veya güncelleme yok. Tamamen DOM belirli bir noktada bir görünüm sergileme amaçlı, farklı görüş ve takas için izin, kolayca.

Daha fazla Bölge hakkında bilgi alabilirsiniz, burada: http://lostechies.com/derickbailey/2011/12/12/composite-js-apps-regions-and-region-managers/

Düzen

Bir Düzen görünümü özel bir türüdür. Tek bir şablon oluşturmak için tasarlanmıştır anlamına gelir ve bir model olabilir Marionette.ItemView doğrudan, uzanan (veya "") öğe şablonu ile ilişkili.

Bir Düzen ve bir İtemView arasındaki farkı bir Düzeni Bölgelerini içeren. Sana bir Düzeni tanımlarken, bir şablon vermek ama aynı zamanda şablonu içeren bölgeleri belirtin. Düzeni oluşturma sonra, düzeni tanımlanan bölgeler içinde kullanarak diğer görüş görüntüleyebilirsiniz.

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

Bölgeler Ve Düzenlerini Birlikte

Zaten Düzenleri ve Bölgeler ayrı işlevleri sağlarlar olsa ilgili olduğunu görebilirsiniz. Ama bir Düzen ve bir Bölgede birlikte düzenler, bölgeler ve görüş alt düzenleri ve iç içe geçmiş hiyerarşileri oluşturmak için kullanılabilir.

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

Yuva düzenleri ve bölgeler herhangi bir sayıda birlikte, görüşlerini herhangi bir sayı ile, Omurga uzanan herhangi bir görünüm türünü kullanarak yapabilirsiniz.Görünümü (sadece Kukla görünümleri).