Bootstrap Modal only shows up once when I use bindHandler

Question

JSFiddle : http://jsfiddle.net/PTSkR/177/

Desired behavior:. When I click the Close button or the x button, the modal closes, but I can still open it again if I click show.

What is going on . Modal closes once and never opens again.

Code :

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

Answer 1

You need to make sure that you are handling the hidden modal event so that you can clear the observable. Then, the next time you set it to true , it will notify all subscribers as it has actually changed (observables do not report when their value is set to the same value).

Something like this in your init:

  init: function (element, valueAccessor) { $(element).on("hidden", function() { valueAccessor()(false); }); }, 

If necessary, you can use ko.isWriteableObservable to determine if the value passed to the binding is actually observable, which you can write.