넉 아웃 체크 바인딩

Question

그래서 양식의 일부 div에 대한 가시성을 트리거하는 맞춤 knockout 체크 박스 바인딩을 사용하려고합니다. 왜 제대로 작동하지 않는지 알아내는 데 어려움을 겪고 있습니다. 초기 값이 설정되는 시점까지 도달했으나 다시 갱신되지는 않습니다. 내 문제는 내가 올바르게 확인란을 바인딩 할 수없는 것 같습니다.

나는 이것을 이해하는 데 도움이되는 바이올린을 가지고 있습니다. 로드 할 때 올바른 값을 설정하지만 이후의 클릭은 아무 것도하지 않습니다.

나는 너무 오랫동안 그것을 보았다.

var data = true; 

ko.bindingHandlers.aipchecked = { 
    update: function(element, valueAccessor) { 
     var options = valueAccessor(); 
     alert(options.value()); 
     if (options.value()) { 
        $(options.checked).slideDown('fast', function() { }); 
        $(options.unchecked).slideUp('fast', function() { }); 
     } else { 
        $(options.checked).slideUp('fast', function() { }); 
        $(options.unchecked).slideDown('fast', function() { }); 
     } 
     options.value(options.value()) 
     //ko.bindingHandlers.checked.update(element, options.value); 
     } 
}; 

var viewModel = { 
    control:[ 
     { 
      checked: '#one', 
      unchecked: '', 
      value: ko.observable(true) 
     }  
    ] 
}; 
viewModel.control[0].value(data); 
ko.applyBindings(viewModel); 

html로

<div data-bind="foreach: control"> 
<input type="checkbox" data-bind="aipchecked:{value: value,checked:checked,unchecked:unchecked}" /> 
    <label data-bind="text: value"></label> 
</div> 
    <div id="one">testing</div> 

http://jsfiddle.net/gdefilippi/SuAYR/8/

V/R, 제프리 코드에서가는

Answer 1

두 가지 다음과 같습니다 -

1. HTML의 '값'바인딩 대신 '체크 된'바인딩을 사용하십시오. 체크 이벤트는 체크 상자의 상태를 변경하기 때문입니다.

   <div data-bind="foreach: control"> 
       <input type="checkbox" data-bind="checked:value,aipchecked:{value: value,checked:checked,unchecked:unchecked}" /> 
       <label data-bind="text: value"></label> 
   </div> 
   <div id="one">testing</div> 
   

2. JS 코드에서 확인 된 업데이트 바인딩을 제거하십시오. 이 같은

   var data = true; 
   
   ko.bindingHandlers.aipchecked = { 
       update: function(element, valueAccessor) { 
       var options = valueAccessor(); 
       alert(options.value()); 
       if (options.value()) { 
         $(options.checked).slideDown('fast', function() { }); 
         $(options.unchecked).slideUp('fast', function() { }); 
       } else { 
         $(options.checked).slideUp('fast', function() { }); 
         $(options.unchecked).slideDown('fast', function() { }); 
       } 
       //ko.bindingHandlers.checked.update(element, options.value); 
       } 
   }; 
   
   var viewModel = { 
       control:[ 
        { 
         checked: '#one', 
         unchecked: '', 
         value: ko.observable(true) 
        }  
       ] 
   }; 
   viewModel.control[0].value(data); 
   ko.applyBindings(viewModel);