骨干/木偶：将视图事件添加到引导模式的动态添加视图答案

【问题标题】：Backbone/Marionette: Adding view events to a dynamically added view for a bootstrap modal骨干/木偶：将视图事件添加到引导模式的动态添加视图
【发布时间】：2014-04-02 20:21:01
【问题描述】：

我有一个木偶布局，出于演示目的，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，该模板 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 的事件。

我怎样才能做到这一点？我尝试过使 this.ModalView 的 el 与 this.BodyView 的相同，但这会破坏事情。我也尝试过使用delegateEvents，但没有成功。

【问题讨论】：

标签： javascript jquery twitter-bootstrap backbone.js marionette

【解决方案1】：

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

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

【讨论】：

谢谢，大卫。实际上，我最初尝试了另一条路线，看看我是否可以让它工作并接近完成。基本上我在 ModalView 上动态创建了视图方法，这样当从 ModalView 触发视图事件时，它会调用 BodyView 上存在的相同函数。这行得通。我唯一的问题是，由于在呈现页面后创建了 ModalView，ui 对象不再正常运行，因此我调用 view.ui.whatever 的函数正在中断。我尝试使用bindUIElements，但没有奏效。如何让ui 对象重新绑定？

【解决方案2】：

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

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

同样适用于 ModalView。

【讨论】：