1

ユーザーがモーダルポップアップを使用してアイテムを更新できるようにするknockoutjsモデルを使用してWebページを作成しようとしています。モーダルには、jQueryフェイスボックスプラグインを使用したいと思います-http ://defunkt.io/facebox/

アイテムを2回更新しようとするまで機能する、進行中のデモがあります。更新する最初のアイテムは正常に保存されますが、その後、バインディングが失われるようです。他の質問の例をfaceboxプラグインに合わせて調整しようとしましたが、正しく理解できないようです。

私はこのように定義されたカスタムバインディングハンドラーを使用しています：-

ko.bindingHandlers.modal = {
    init: function(element, valueAccessor, allBindingsAccessor) {
        var allBindings = allBindingsAccessor();
        var $element = $(element);
        $element.addClass('hide modal');

        if (allBindings.modalOptions) {
            if (allBindings.modalOptions.beforeClose) {
                $element.on('hide', function() {
                    return allBindings.modalOptions.beforeClose();
                });
            }
        }

        return ko.bindingHandlers['with'].init.apply(this, arguments);
    },
    update: function(element, valueAccessor) {
        var value = ko.utils.unwrapObservable(valueAccessor());

        var returnValue = ko.bindingHandlers['with'].update.apply(this, arguments);

        if (value) {
            $.facebox(element);
        } else {
            $(document).trigger('close.facebox');
        }

        return returnValue;
    }
};

私のノックアウトモデルには、モーダルによって編集された選択されたアイテムを格納する変数と、それを更新/保存/キャンセルする関数があります

self.editingMapmarker = ko.observable();
    self.editMapmarker = function(mapmarker) {
        self.editingMapmarker(mapmarker);
        self.editingMapmarker().reset();
    };

    self.saveMapmarker = function() {
        self.editingMapmarker().accept();
        self.editingMapmarker(undefined);
    }

    self.cancelSaveMapmarker = function() {
        self.editingMapmarker(undefined);
    }

私はこれまでのところ私の仕事のJsfiddleを持っています-http: //jsfiddle.net/juBxs/

誰かが最初の保存後にバインディングを持続させるのを手伝ってもらえますか？

4

1 に答える 1

1

2つのオプション：

カスタムバインディングはKO2.2ですでに正しく機能しているようです：http：//jsfiddle.net/rniemeyer/Cpvtd/

2.2にアップグレードできない場合は、更新の順序とwith更新facebox機能の開閉を切り替えることができるはずです。

update: function(element, valueAccessor) {
    var value = ko.utils.unwrapObservable(valueAccessor());

    if (value) {
        $.facebox(element);
    } else {
        $(document).trigger('close.facebox');
    }


    return ko.bindingHandlers['with'].update.apply(this, arguments);
}

こちらのサンプル：http：//jsfiddle.net/rniemeyer/wsNZa/

于 2012-11-28T17:45:55.383 に答える