facebox 모달을 가진 knockoutjs

Question

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

내가 저장/업데이트하는 내 모달에 의해 편집 선택한 항목을 저장하는 변수와 기능을 가지고/취소 - :

I는 다음과 같이 정의 된 사용자 정의 bindinghandler을 사용하고 있습니다 그것은

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/은

는

아무도 나를 도와 수있는 첫 번째 저장 한 후 계속 바인딩? 당신은 2.2로 업그레이드 할 수없는 경우 http://jsfiddle.net/rniemeyer/Cpvtd/

것은, 당신이 with의 순서를 전환 할 수 있어야한다 :

Answer 1

두 가지 옵션 : 사용자 정의가 KO 2.2에서 제대로 이미 작동합니다 바인딩처럼

이 보이는 업데이트 및 업데이트 기능에서 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/