넉 아웃 사용자 정의 바인딩이 여러 번 실행됩니다.

Question

현재 가시적 인 스팬과 숨겨진 입력 요소가있는 웹 페이지에 대한 사용자 정의 바인딩을 만들려고합니다. 스팬을 클릭하면 사라지고 입력이 나타납니다. 입력이 포커스를 잃으면 스팬은 입력의 새 값으로 업데이트됩니다. 그러나 어떤 이유로 내 blur 기능이 내 스팬을 클릭 할 때마다 다시 바인딩됩니다. 이는 원하는 것이 아닙니다. 이 문제를 어떻게 해결할 수 있습니까? 내가 두 번 내 범위를 클릭하면 I 만 얻을되어있을 때

HTML

<!-- ko foreach: formula --> 
    <span data-bind="text: $data, attr: {name: $index}, convert: $index()"></span> 
    <input data-bind="value: $data, attr: {name: $index}" class="hide"/><br/> 
<!-- /ko --> 

자바 스크립트

ko.bindingHandlers.convert = { 
    init: function(element, valueAccessor) { 
    $(element).click(function() { 
     var index = valueAccessor(); 
     var inputName = "input[name="+index+"]"; 
     $(element).addClass("hide"); 
     $(inputName).removeClass("hide").focus().blur(function() { 
     console.log("firing"); 
     $(inputName).addClass("hide"); 
     $(element).removeClass("hide"); 
     $(element).text($(inputName).val()); 
     }); 
    }); 
    } 
}; 

그래서, 난 내 콘솔

firing 
firing 
firing 

를 얻을 것 firing 두 번.

참고 : Knockout 튜토리얼의 예제는 모든 입력 필드에 바인드되므로 입력란을 클릭해야만 해당 특정 범위 만 토글해야합니다.

Answer 1

이것은 전혀 신비가 아닙니다. 해당 코드를보십시오 :

클릭 할 때마다 blur 처리기를 추가하십시오. 다음과 같이 핸들러를 제거해보십시오.

$(element).click(function() { 
    var $element = $(this); 
    var index = valueAccessor(); 
    var inputName = "input[name="+index+"]"; 
    var $input = $(inputName); 
    $element.addClass("hide"); 
    $input.unbind('blur'); 
    $inputName.removeClass("hide").focus().blur(function() { 
     console.log("firing"); 
     $input.addClass("hide"); 
     $element.removeClass("hide"); 
     $element.text($input.val()); 
    }); 
}); 

제가 생각하기에 체인을 연결할 수는 있지만 테스트하지 않았습니다.