Twitter-Bootstrap Modal Bindinghandler with Knocko

Question

I'm trying to disable the backdrop from closing the modal when clicked with the following:

ko.bindingHandlers.showModal = {
    init: function (element, valueAccessor) {
    },
    update: function (element, valueAccessor) {
        var value = valueAccessor();
        if (ko.utils.unwrapObservable(value)) {
            $(element).modal({ backdrop: 'static', keyboard: true });
            // this is to focus input field inside dialog
            $("input", element).focus();
        }
        else {

            $(element).modal('hide');
        }
    }
};

From what I understand, $(element).modal({ backdrop: 'static', keyboard: true }); should achieve what I'm after. But if I click on the backdrop the modal still closes though, and in fact breaks the "show" button. What am I doing wrong here?

Fiddle: http://jsfiddle.net/PTSkR/175/

Answer 1

You problem is that you are trying to initialize your modal multiple times.

The initialization logic where you set backdrop: 'static' should go into the init function (which is called only once) and you need to call .modal('show') and .modal('hide') in your update function:

ko.bindingHandlers.showModal = {
    init: function (element, valueAccessor) {
        $(element).modal({ backdrop: 'static', keyboard: true, show: false });
    },
    update: function (element, valueAccessor) {
        var value = valueAccessor();
        if (ko.utils.unwrapObservable(value)) {
            $(element).modal('show');
            $("input", element).focus();
        }
        else { 
            $(element).modal('hide');
        }
    }
};

Demo JSFiddle.