Skip to content

Instantly share code, notes, and snippets.

@anwalkers
Created February 5, 2014 20:18
Show Gist options
  • Save anwalkers/8832204 to your computer and use it in GitHub Desktop.
Save anwalkers/8832204 to your computer and use it in GitHub Desktop.
Durandal and Bootstrap 3.1.0 modal dialog context
//bootstrap 3.1.0 modal dialog context for Durandal
define(['plugins/dialog'], function (dialog) {
/**
* @class ScrollDialogContext
*/
dialog.addContext('bootstrapDialog', {
blockoutOpacity: .2,
removeDelay: 300,
/**
* In this function, you are expected to add a DOM element to the tree which will serve as the "host"
* for the modal's composed view. You must add a property called host to the modalWindow object which
* references the dom element. It is this host which is passed to the composition module.
* @method addHost
* @param {Dialog} theDialog The dialog model.
*/
addHost: function (theDialog) {
var body = $('body');
//Add base bootstrap modal
var host = $('<div class="modal fade" id="bootstrapModal" tabindex="-1" role="dialog" aria-labelledby="bootstrapModal" aria-hidden="true"></div>')
.appendTo(body);
//set the Dialog.host property
theDialog.host = host.get(0);
},
/**
* This function is expected to remove any DOM machinery associated with the specified dialog and
* do any other necessary cleanup.
* @method removeHost
* @param {Dialog} theDialog The dialog model.
*/
removeHost: function (theDialog) {
//Call bootstrap to hide the modal
$('#bootstrapModal').modal('hide');
//remove the modal class from the body
$(document.body).removeClass('modal-open');
//Using Q but this could be a simple timeout
//Remove the DOM element for the modal
//Noticed some strange effects if delay was shorter that 300ms
Q.delay(this.removeDelay).then(function () {
ko.removeNode(theDialog.host);
});
},
attached: function (view) {
},
/**
* This function is called after the modal is fully composed into the DOM, allowing your implementation to
* do any final modifications, such as positioning or animation. You can obtain the original dialog object by
* using `getDialog` on context.model.
* @method compositionComplete
* @param {DOMElement} child The dialog view.
* @param {DOMElement} parent The parent view.
* @param {object} context The composition context.
*/
compositionComplete: function (child, parent, context) {
var theDialog = dialog.getDialog(context.model);
//show the modal
$('#bootstrapModal').modal('show');
//Handle removing the DOM elements when the dialog is closed by clicking in modal-backdrop
$('#bootstrapModal').on('hidden.bs.modal', function (e) {
theDialog.close();
});
}
});
});
@dandsrlidp
Copy link

Hello, I am using this plugin https://github.com/mbejda/BootstrapModalDurandalJS. It has been very helpful, but I have an issue. When I try to open dialog for another view. It just shows me old view!! I am guessing that it is somehow caching the old views and even though I call dialog.showBootstrapDialog with new object view, it just shows the old one!? can you help me fix it!?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment