Skip to content
Create a gist now

Instantly share code, notes, and snippets.

modal dialog with backbone
<script id="modal-view-template" type="text/html">
<div class="modal-header">
<h2>This is a modal!</h2>
<div class="modal-body">
<p>With some content in it!</p>
<div class="modal-footer">
<button class="btn">cancel</button>
<button class="btn-default">Ok</button>
<div id="modal"></div>
var view = new MyView();
var $modalEl = $("#modal");
var ModalRegion = Backbone.Marionette.Region.extend({
el: "#modal",
constructor: function(){
Backbone.Marionette.Region.prototype.constructor.apply(this, arguments);
this.on("view:show", this.showModal, this);
getEl: function(selector){
var $el = $(selector);
$el.on("hidden", this.close);
return $el;
showModal: function(view){
view.on("close", this.hideModal, this);
hideModal: function(){
var App = new Backbone.Marionette.Application();
main: "#main-content",
modal: ModalRegion
// somewhere else in the app
var view = new MyView();;

Came across this gist, and I have a few questions as I'm trying to figure out how to use modals with Marionette...

Where is the modal() function defined ? Does it automagically wire up "close" events (by clicking an X, or with the Esc key) ?

Am I right in thinking that 2.js is not required if we have 3.js and 4.js ?

What is MyView ? Is a basic Backbone.View, a Backbone.Marionette.View, or something else ? Could you add the code for it ?

By the way, thanks for all you gists, jsFiddles, and blog posts, they're very helpful !


twitter bootstrap:

correct. 2.js is the normal ways of doing this, and 3 / 4 are how i do it with my backbone.marionette setup

this gist is for a blog post that i have scheduled for tuesday, which explains all this more in depth. :)


Ah, I didn't think to look within Bootstrap...

Thanks for the reply, I look forward to your blog post !


I came across this gist before actually finding the related article.

Here's the related article:


I have error "bindAll must be passed function names" with _.bindAll(this).

elysiunk commented Aug 7, 2013

Same here: I have error "bindAll must be passed function names" with _.bindAll(this)


I think line 5 of 3.js should be:

_.bindAll( this, "getEl", "showModal", "hideModal" );

otherwise, bindAll complains that it should be passed some function names.


I made a gist that worked for our current project with Bootstrap and Backbone 1.0

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Something went wrong with that request. Please try again.