Backbone Marionette events, Zurb Foundation's Reveal Modals - backbone.js

Question

I'm building a modal popup by jamming a Backbone Marionette itemview into a Foundation Reveal modal. The modals appear but no events fire. Specifically, I'm trying to catch a click event.
I load Foundation from a Marionette Layout view.
'use strict';
define([
'jquery',
'underscore',
'backbone',
'region/actionbar',
'region/modal',
'text!/js/template/global.ejs',
'js/views/actionbar/actionbar.js',
'less!/style/global.less',
'css!/js/bower_components/foundation/css/foundation.css',
'/js/bower_components/foundation/js/foundation/foundation.js',
'/js/bower_components/foundation/js/foundation/foundation.reveal.js',
'marionette'
], function ($, _, Backbone, ActionBar, Modal, Template, ActionBarView) {
var GlobalLayout = Backbone.Marionette.Layout.extend({
template: _.template(Template),
el: 'body',
regions: {
content: "#content",
actionBar: ActionBar,
modal: '#modal'
},
initialize: function(){
},
onRender: function(){
// Load foundation
$(document).foundation();
},
title: function(title) {
// this.actionbar.title(title);
// document.title = "Workbench :: " + title;
}
});
var layout = new GlobalLayout();
layout.render();
return layout;
});
The popup is being loaded from a click event in a view in the actionbar region. Here's the Region:
'use strict';
define([
'jquery',
'underscore',
'backbone',
'marionette'
], function ($, _, Backbone) {
var ActionBar = Backbone.Marionette.Region.extend({
el: "#action-bar"
});
return ActionBar;
});
...and here's the View in that region. onSignUp() jams my SignUp modal into the Modal region. It then re-initializes foundation.
'use strict';
define([
'jquery',
'underscore',
'backbone',
'layout/global',
'/js/views/modals/sign-up.js',
'/js/views/modals/sign-in.js',
'model/user',
'text!/js/template/actionbar/actionbar.ejs',
'less!/style/global.less',
'marionette'
], function ($, _, Backbone, layout, SignUp_Modal, SignIn_Modal, User, Template) {
var ActionBarView = Backbone.Marionette.ItemView.extend({
initialize: function(){
this.setElement('#action-bar');
},
template: _.template(Template),
events: {
"click .sign-in" : "onSignIn",
"click .sign-up" : "onSignUp"
},
onSignUp: function(e){
// e.preventDefault();
layout.modal.show( new SignUp_Modal() );
$(document).foundation();
},
onSignIn: function(e){
// Prevent the link from doing anything.
e.preventDefault();
// Load modal popup that requests user to sign in
layout.modal.show( new SignIn_Modal() );
$(document).foundation();
}
});
return ActionBarView;
});
Finally, here's my SignUp_Modal view and its template.
'use strict';
define([
'jquery',
'underscore',
'model/user',
'text!/js/template/modals/sign-up.ejs',
'marionette'
], function ( $, _, User, Template){
var Modal = Backbone.Marionette.ItemView.extend({
events: {
'click #join': 'onJoin',
'click .me': 'onJoin'
},
template: _.template(Template),
onJoin: function(e){
// Check whether the click events do anything
console.log('Heard it');
}
});
return Modal;
});
Template:
<div id="signUp" class="reveal-modal" data-reveal>
<form>
<div class="row">
<div class="small-8">
<div class="row">
<div class="small-3 columns">
<label for="email" class="right inline">Email</label>
</div>
<div class="small-9 columns">
<input type="text" id="email" placeholder="Email">
</div>
</div>
<div class="row">
<div class="small-3 columns">
<label for="phone" class="right inline">Phone</label>
</div>
<div class="small-9 columns">
<input type="text" id="phone" placeholder="Phone">
</div>
</div>
<div class="row">
<div class="small-3 columns">
<label for="pass" class="right inline">Password</label>
</div>
<div class="small-9 columns">
<input type="password" id="pass">
</div>
</div>
<div class="row">
<label>Username will be...</label>
<input type="radio" name="username" value="email" id="username_email" checked><label for="username_email">Email</label>
<input type="radio" name="username" value="phone" id="username_phone"><label for="username_phone">Phone</label>
</div>
<div class="row">
<div class="small-3 columns">
Join
</div>
</div>
</div>
</div>
</form>
<div class="me">blaaaa</div>
<a class="close-reveal-modal">×</a>
</div>
I'm betting any of these would be helpful:
Boilerplate example showing how to implement Zurb Foundation with a backbone project, specifically where you're jamming a backbone view into a foundation modal?
Any general reasons why views don't hear click events?
Have I improperly loaded the view into the region?
The error occurs specifically when I click either the element with class="me" or id="join". Both of these should call onJoin() but neither do.

Answer 1

The events are not being trigger because foundation creates a new DOM element to hold the modal, this element is outside of your ItemView's instance's el, and as you might know Backbone only delegate events to the element associated with the view.