Question

我有一个Marionette布局，为了演示目的，html看起来像：

<header id="header-region" class="page-title"></header>
<section id="template-content" class="full-section">
  <div id="error-messages" class="fade main-section"><!-- errors --></div>
  <div id="content-region"> </div>
</section>

其布局视图的区域为：

regions: {
  header:  "#header-region",
  content: "#content-region"
}

到目前为止，我在页面的模板html中有任何给定页面的模态html，它将包含在content区域中。

我有一个想法，现在为要显示的模态创建一个单独的区域。改变事情看起来像这样：

模板：

<section id="template-content" class="full-section">
  <div id="error-messages" class="fade main-section"><!-- errors --></div>
  <div id="content-region"> </div>
  <div id="modal-region"></div>
</section>

该地区：

regions: {
  header:  "#header-region",
  content: "#content-region",
  modal: "#modal-region"
}

所以我希望能够做到这样的事情：

// Controller
define([], function(){
    initialize: function(){},
    showHeaderView: function(){
       this.HeaderView = new HeaderView();
       this.layout.header.show(this.HeaderView);
    },
    showContentView: function(){
      // this.BodyView's template used to contain the modal html
      this.BodyView = new BodyView();
      this.layout.content.show(this.BodyView);
    },
    showModalView: function(){
      this.ModalView = new ModalView();
      this.layout.modal.show(this.ModalView);
    }
});

这可以正常渲染模态，但模态的事件会丢失，因为它们最初是由this.BodyView设置的。

模态有一个复选框，在change上运行一个函数，该函数在this.BodyView上，但我想从this.BodyView绑定this.ModalView的事件。

我怎样才能做到这一点？我已经尝试过制作这个.ModalView的el与此相同.BodyView的但却打破了局面。我也试过使用delegateEvents，但没有运气。

Answer 1

此截屏视频完全符合您的要求：http://www.backbonerails.com/screencasts/building-dialogs-with-custom-regions

代码在这里：https://github.com/brian-mann/sc01-dialogs

Answer 2

如果你将HeaderView作为ItemView（或CollectionView / CompositeView），你可以通过传递参数来实例化它，如

new HeaderView({events:{
"click .x" : function(){} // your function in-line or reference
});

同样适用于ModalView。

Backbone / Marionette：将视图事件添加到引导模式的动态添加视图中

2 个答案: