1

我正在尝试创建一个带有 knockoutjs 模型的网页，该模型允许用户使用模式弹出窗口更新项目。对于模态，我想使用 jQuery facebox 插件 - http://defunkt.io/facebox/

我有一个正在进行的演示，直到您第二次尝试更新项目。您更新的第一个项目保存得很好，但是绑定似乎丢失了。我试图从其他问题中调整示例以适应 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

两种选择：

看起来您的自定义绑定已经在 KO 2.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 回答