Skip to content

Instantly share code, notes, and snippets.

@insaciableslabs
Forked from mxriverlynn/1.html
Created August 28, 2013 17:55
Show Gist options
  • Save insaciableslabs/6369107 to your computer and use it in GitHub Desktop.
Save insaciableslabs/6369107 to your computer and use it in GitHub Desktop.
Adaptation of Derick Bayley Notification Region to be used with Twitter Bootstrap and Backbone 1.0
<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 view = new MyView();
view.render();
var $modalEl = $("#modal");
$modalEl.html(view.el);
$modalEl.modal();
var ModalRegion = Backbone.Marionette.Region.extend({
el: "#modal",
constructor: function(){
_.bindAll( this, "getEl", "showModal", "hideModal" );
Backbone.Marionette.Region.prototype.constructor.apply(this, arguments);
this.listenTo(this, "show", this.showModal, this);
},
getEl: function(selector){
var $el = $(selector);
$el.attr("class","modal hide fade")
$el.on("hidden", this.close);
return $el;
},
showModal: function(view){
this.listenTo(view, "close", this.hideModal, this);
this.$el.modal('show');
},
hideModal: function(){
this.$el.modal('hide');
}
});
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