主干/木偶:将视图事件添加到一个为引导模式动态添加的视图中

Backbone/Marionette: Adding view events to a dynamically added view for a bootstrap modal

本文关键字:添加 视图 一个 动态 模式 木偶 事件 主干      更新时间:2023-09-26

我有一个木偶布局,为了演示,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的ModalView。

我怎么才能做到呢?我试过做这个。ModalView和这个是一样的。BodyView,但这破坏了一些东西。我也试过使用delegateEvents,但没有运气。

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

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

如果你有HeaderView作为ItemView(或CollectionView/CompositeView)在它,你可以实例化它与传递参数,如

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

同样适用于ModalView