사용자 정의 crossFadeVisible bindingHandler를 만드는 데 문제가 있습니다

Question

crossFadeVisible bindingHandler를 만들려고합니다. 주요 아이디어는 값을 설정할 때 페이드 인하려는 것입니다. 값을 지우면 (즉, null로 설정하면) 페이드 아웃하고 싶습니다. 값을 변경하면, 이전 값으로 페이드 아웃하고 새 값으로 페이드 인하 고 싶습니다.

나는이 부분에서 오후의 더 좋은 부분과 싸우고 있었기 때문에 가능하지 않다.

다른 사람들이 봤던 것을 따라 가기로 결심했으며 jsfiddle (http://jsfiddle.net/jrstarke/4DTFq/20/)을 만듭니다.

초기 값은 정의되어 있지 않지만 Set을 누르면 값을 1로 설정하고 몇 가지 새로운 버튼을 추가합니다. 값을 지우면 예상대로 사라지고 다시 설정하면 정상적으로 작동합니다. 증분을 치면 모든 것이 예상대로 작동합니다.

그리고 이제는 설명 할 수없는 부분이 있습니다. '2'가 표시되면 증가 할 것이고 아무 일도 일어나지 않습니다. 선택을 취소하면 버튼이 사라집니다 (원래 값을 지워 버렸기 때문에). 그러나 표시 값은 동일하게 유지됩니다.

나는 설명 할 수없는 것처럼 보입니다. value.displayed(value())을 호출하여 현재 값으로 새 표시 값을 설정하면 즉시 업데이트 메서드가 다시 호출됩니다 (?) 메소드를 완전히 실행하고 예상대로 업데이트하지만이 업데이트 메소드가 결코 다시 호출되지 않으므로 변경 사항의 값을 언 바운드 한 것으로 보입니다.

누구든지이 문제를 해결하는 방법을 알고 있습니까? 아니면 내가하려는 일이 가능합니까?

Answer 1

문제는 처음 fadeOut 다음에 처리기의 업데이트 코드가 호출되지 않는다는 것입니다. 그 이유는 종속성 추적 코드가 실제로 읽히지 않기 때문에 바인딩이 value에 종속되어 있음을 감지하지 못하기 때문입니다. 따라서 값이 실제로 업데이트되면 바인딩이 다시 트리거되지 않습니다.

왜 그 이유는 postFade 코드가 바인딩이 업데이트 될 때 호출되지 않기 때문입니다. fadeOut이 완료되면 실제로 호출됩니다. value.displayed이 위증 일 때 postFade 함수가 호출 되었기 때문에 처음 업데이트 될 때 업데이트됩니다.

간단한 수정 방법은 업데이트 코드가 호출 될 때 value을 읽는 것입니다. 값을 가지고 무엇이든 할 필요는 없으며 단지 읽으려고합니다.

update: function(element, valueAccessor) { 
    var value = valueAccessor(); 

    var postFade = function() { 
     // postFade depends on `value` 
     value.displayed(value()); 
     if (value.displayed()) $(element).fadeIn('fast'); 
    } 

    if (value.displayed()) { 
     // postFade is invoked later after the fade out 
     $(element).fadeOut('fast', postFade); 
     // dependent on `value.displayed` 

     // get the value so the dependency tracking code 
     // detects that the binding depends on it 
     value(); 
    } 
    else { 
     // postFade is invoked immediately 
     postFade(); 
     // dependent on `value.displayed` and `value` 
    } 
}