<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> |
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'); | |
} | |
}); |
This comment has been minimized.
Show comment
Hide comment
This comment has been minimized.
Show comment Hide comment
davidsulc
commented
Apr 12, 2012
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 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 By the way, thanks for all you gists, jsFiddles, and blog posts, they're very helpful ! |
This comment has been minimized.
Show comment
Hide comment
This comment has been minimized.
Show comment Hide comment
derickbailey
Apr 12, 2012
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. :)
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. :) |
This comment has been minimized.
Show comment
Hide comment
This comment has been minimized.
Show comment Hide comment
davidsulc
Apr 12, 2012
Ah, I didn't think to look within Bootstrap...
Thanks for the reply, I look forward to your blog post !
davidsulc
commented
Apr 12, 2012
Ah, I didn't think to look within Bootstrap... Thanks for the reply, I look forward to your blog post ! |
This comment has been minimized.
Show comment
Hide comment
This comment has been minimized.
Show comment Hide comment
vincentmac
Jul 9, 2013
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/
vincentmac
commented
Jul 9, 2013
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/ |
This comment has been minimized.
Show comment
Hide comment
This comment has been minimized.
Show comment Hide comment
vkartaviy
commented
Jul 21, 2013
I have error "bindAll must be passed function names" with _.bindAll(this). |
This comment has been minimized.
Show comment
Hide comment
This comment has been minimized.
Show comment Hide comment
elysiunk
Aug 7, 2013
Same here: 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) |
This comment has been minimized.
Show comment
Hide comment
This comment has been minimized.
Show comment Hide comment
ijdickinson
Aug 15, 2013
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.
ijdickinson
commented
Aug 15, 2013
I think line 5 of
otherwise, |
This comment has been minimized.
Show comment
Hide comment
This comment has been minimized.
Show comment Hide comment
insaciableslabs
Aug 28, 2013
I made a gist that worked for our current project with Bootstrap and Backbone 1.0 https://gist.github.com/insaciableslabs/6369107
insaciableslabs
commented
Aug 28, 2013
I made a gist that worked for our current project with Bootstrap and Backbone 1.0 https://gist.github.com/insaciableslabs/6369107 |
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
, aBackbone.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 !