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

Question

I've got a Marionette layout and for demo purposes the html looks like:

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

Its layout view's regions are:

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

Up until now, I've had any given page's modal html inside the page's template html which would be contained in the content region.

I have an idea to now create a separate region for modals to be shown in. Changing things to look like this:

Template:

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

And the region:

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

So I'd like to be able to do something like this:

// 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 works and renders the modal properly but the modal's events are lost because they were originally set by this.BodyView.

The modal has a checkbox that on change runs a function that is on this.BodyView but I want to bind the events for this.ModalView from this.BodyView.

How can I accomplish that? I've tried making this.ModalView's el the same as this.BodyView's but that breaks things. I've tried to use delegateEvents as well but with no luck.

David Sulc David Sulc · Accepted Answer · 2014-03-14T17:32:46

This screencast does exactly what you want: http://www.backbonerails.com/screencasts/building-dialogs-with-custom-regions

Code is here: https://github.com/brian-mann/sc01-dialogs

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

2 Answers