public
derickbailey / 1.html
Last active

modal dialog with backbone

  • Download Gist
1.html
HTML
File suppressed. Click to show.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 
<script id="modal-view-template" type="text/html">
  <div class="modal-header">
    <h2>This is a modal!</h2>
  </div>
  <div class="modal-body">
    <p>With some content in it!</p>
  </div>
  <div class="modal-footer">
    <button class="btn">cancel</button>
    <button class="btn-default">Ok</button>
  </div>
</script>
 
<div id="modal"></div>
2.js
JavaScript
File suppressed. Click to show.
1 2 3 4 5 6 7 
var view = new MyView();
view.render();
 
var $modalEl = $("#modal");
 
$modalEl.html(view.el);
$modalEl.modal();
3.js
JavaScript
File suppressed. Click to show.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 
  var ModalRegion = Backbone.Marionette.Region.extend({
    el: "#modal",
 
    constructor: function(){
      _.bindAll(this);
      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);
      this.$el.modal('show');
    },
 
    hideModal: function(){
      this.$el.modal('hide');
    }
  });
4.js
JavaScript
File suppressed. Click to show.
1 2 3 4 5 6 7 8 9 10 
var App = new Backbone.Marionette.Application();
 
App.addRegions({
  main: "#main-content",
  modal: ModalRegion
});
 
// somewhere else in the app
var view = new MyView();
App.modal.show(view);
davidsulc commented

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 !

derickbailey commented

twitter bootstrap: http://twitter.github.com/bootstrap/javascript.html#modals

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. :)

davidsulc commented

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

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

vincentmac commented

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

Here's the related article: http://lostechies.com/derickbailey/2012/04/17/managing-a-modal-dialog-with-backbone-and-marionette/

vkartaviy commented

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

elysiunk commented

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

ephemerian commented

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.

insaciableslabs commented

I made a gist that worked for our current project with Bootstrap and Backbone 1.0 https://gist.github.com/insaciableslabs/6369107

Please sign in to comment on this gist.

Something went wrong with that request. Please try again.