-
-
Save Alex-Shilman/1da4525ad8fcbefd63ef to your computer and use it in GitHub Desktop.
Modal Bootstrap 3 + Marionette.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<script id="modal-view-template" type="text/html"> | |
<div class="modal-dialog"> | |
<div class="modal-content"> | |
<div class="modal-header"> | |
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> | |
<h4 class="modal-title" id="myModalLabel">Modal title</h4> | |
</div> | |
<div class="modal-body"> | |
... | |
</div> | |
<div class="modal-footer"> | |
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button> | |
<button type="button" class="btn btn-primary">Save changes</button> | |
</div> | |
</div><!-- /.modal-content --> | |
</div><!-- /.modal-dialog --> | |
</script> | |
<div class="modal fade" id="modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"></div> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
var view = new MyView(); | |
view.render(); | |
var $modalEl = $("#modal"); | |
$modalEl.html(view.el); | |
$modalEl.modal(); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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 file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment