Загрузочный твиттер 3 Модаль с нокаутом

Я пытаюсь полностью связать твиттер-бутстрап с нокаутом. По полной привязке я имею в виду, что я хочу, чтобы каждое тесное взаимодействие с модальным диалогом работало с нокаутом. Я видел некоторые из вопросов, которые частично связывают их (например, это не разрешает esc).

Я использую почти идентичную привязку (которую я действительно нашел в другом месте)

ko.bindingHandlers.modal = {
    init: function (element, valueAccessor) {
        $(element).modal({
            show: false
        });
    },
    update: function (element, valueAccessor) {
        var value = valueAccessor();
        if (ko.utils.unwrapObservable(value)) {
            $(element).modal('show');
        } else {
            $(element).modal('hide');
        }
    }
}

Но проблема в том, что не все работает в мой скрипт. Как вы видите, если вы закроете Modal с помощью кнопки Close, вы можете снова запустить этот модал. Но если вы закроете его с помощью клавиши Esc или щелкнув по фону или на кнопке X, вы не сможете снова открыть Modal.

Я знаю, что проблема связана с тем, что, когда я закрываю модальные с другими средствами (он не меняется наблюдаемым, поэтому, когда я его запускаю во второй раз, ничего не меняется). Но я не могу понять, как это сделать должным образом.

Вот мой взломать:-), где все работает. Я даю новую ценность каждый раз. Но есть ли лучший способ?

Ответ 1

Загружаемые модальные события, вам просто нужно подключить событие "hide.bs.modal".

Кстати, делайте правильную утилизацию тоже. http://jsfiddle.net/C8w8v/4/

ko.bindingHandlers.modal = {
    init: function (element, valueAccessor) {
        $(element).modal({
            show: false
        });

        var value = valueAccessor();
        if (ko.isObservable(value)) {
            $(element).on('hide.bs.modal', function() {
               value(false);
            });
        }

        // Update 13/07/2016
        // based on @Richard finding,
        // don't need to destroy modal explicitly in latest bootstrap.
        // modal('destroy') doesn't exist in latest bootstrap.
        // ko.utils.domNodeDisposal.addDisposeCallback(element, function () {
        //    $(element).modal("destroy");
        // });

    },
    update: function (element, valueAccessor) {
        var value = valueAccessor();
        if (ko.utils.unwrapObservable(value)) {
            $(element).modal('show');
        } else {
            $(element).modal('hide');
        }
    }
}

Ответ 2

немного более строгий код привязки BS - и классы добавляются при необходимости.:

ko.bindingHandlers.BSModal= {
    init: function (element, valueAccessor) {
        var value = valueAccessor();
        $(element).addClass('modal').addClass('fade').modal({ keyboard: false, show: ko.unwrap(value) });;
    },
    update: function (element, valueAccessor) {
         var value = valueAccessor();
         ko.unwrap(value) ? $(element).modal('show') : $(element).modal('hide');
    }
};

Тогда просто data-bind="BSModal: true/false Observable" значение.