knockoutjs with facebox modal

Question

I am trying to create a web page with a knockoutjs model, that allows the user to update items using a modal popup. For the modal I would like to use the jQuery facebox plugin - http://defunkt.io/facebox/

I have a work in progress demo that works until the second time you try to update an item. The first item you update saves fine but then the binding seems to get lost. I have tried to adapt examples from other questions to suit the facebox plugin but can't seem to get it right.

I am using a custom bindinghandler defined like this:-

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;
    }
};

In my knockout model I have a variable to store the selected item that is edited by my modal, and functions to update/save/cancel it

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);
    }

I have a Jsfiddle of my work so far - http://jsfiddle.net/juBxs/

Can anyone help me get the binding to persist after the first save?

Answer 1

Two options:

Looks like your custom binding will work properly already in KO 2.2: http://jsfiddle.net/rniemeyer/Cpvtd/

If you are unable to upgrade to 2.2, then you should be able to switch the order of the with update and the facebox open/close in the update function.

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);
}

Sample here: http://jsfiddle.net/rniemeyer/wsNZa/