web-dev-qa-db-ja.com

Twitter bootstrap 3ノックアウト付きモーダル

私はTwitterを完全にバインドしようとしていますbootstrapモーダルとノックアウト。完全にバインドすることで、モーダルダイアログとのすべての密接なやり取りがノックアウトで機能するようにしたいと思います。いくつかの 質問 、それらを部分的にバインドします（たとえば、これは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');
        }
    }
}

しかし問題は、すべてが my Fiddle で機能するわけではないことです。 [閉じる]ボタンでモーダルを閉じるかどうかを確認すると、このモーダルを再度起動できます。ただし、Escキーを押すか、背景をクリックするか、Xボタンをクリックして閉じると、モーダルを再び開くことができなくなります。

問題は、他の方法でモーダルを閉じたとき（観測可能に変化していないため、2回目に起動したとき-何も変化しない）という事実が原因であることがわかります。しかし、私はこれを適切に行う方法を理解できません。

これが私の hack :-)で、すべてが機能します。毎回新しい価値を与えています。しかし、もっと良い方法はありますか？

knockout.jstwitter-bootstrap-3
25
Salvador Dali

ブートストラップモーダル提供のイベント。イベント 'hidden.bs.modal'をフックするだけです。

ところで、適切な処分もしてください。 http://jsfiddle.net/C8w8v/377/

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

        var value = valueAccessor();
        if (ko.isObservable(value)) {
            // Update 28/02/2018
            // Thank @HeyJude for fixing a bug on
            // double "hide.bs.modal" event firing.
            // Use "hidden.bs.modal" event to avoid
            // bootstrap running internal modal.hide() twice.
            $(element).on('hidden.bs.modal', function() {
               value(false);
            });
        }

        // Update 13/07/2016
        // based on @Richard's 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');
        }
    }
}
43
huocp

少しきちんとした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"値。

2
Piotr Stulinski