Created
February 5, 2014 20:18
-
-
Save anwalkers/8832204 to your computer and use it in GitHub Desktop.
Durandal and Bootstrap 3.1.0 modal dialog context
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
//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(); | |
}); | |
} | |
}); | |
}); |
Here is a plugin
https://github.com/mbejda/BootstrapModalDurandalJS
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
thanks for the support in advance, but as I can use from a view?