Javascript 主干网/木偶网：为引导模式向动态添加的视图添加视图事件

我有一个木偶布局，出于演示目的，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>

到目前为止，我已经在页面的模板html中包含了任何给定页面的模式html，该模板html将包含在

内容

区域中

我有一个想法，现在创建一个单独的区域来显示情态动词。 将事情更改为如下所示：

// 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);
    }
});

模板：

<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>

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

// 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的事件

---

我怎样才能做到这一点？我试过做这个。莫达维的el和这个一样。BodyView的，但那会破坏东西。我也尝试过使用

delegateEvents

，但运气不佳。

此屏幕广播完全符合您的要求：

---

代码如下：

如果您将HeaderView作为ItemView（或CollectionView/CompositeView）包含在其中，您可以使用如下传递参数对其进行实例化

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

---

莫达维也是如此。

谢谢你，大卫。事实上，我一开始尝试了另一条路线，看看是否能让它工作起来，并且接近完成。基本上，我在ModalView上动态创建了视图方法，这样当从ModalView触发视图事件时，它将调用BodyView上存在的相同函数。这很有效。我唯一的问题是，由于ModalView是在页面呈现后创建的，因此

ui

对象不再正常工作，因此调用

view.ui.的函数正在中断。我试着使用
binduielments
，但没有成功。如何使
ui
对象重新绑定？
new HeaderView({events:{
"click .x" : function(){} // your function in-line or reference
});