일반 "아닌"바인딩을 사용하여 녹아웃에서 isVisible 바인딩을 무효화하는 방법은 무엇입니까?

Question

녹아웃을 사용하여 "not"바인딩을 구현할 수 있습니까? 기본적으로 바인딩 값을 무효화하고 양방향 바인딩/관찰 가능성을 유지하려고합니다.

내보기 모델에는 isVisible 속성이 있지만 내 UI 요구 사항에 따라 숨김 상태 또는 "보이지 않는"상태를 나타내는 확인란이 제공됩니다. 무효화 된 상태를 추적하기 위해 중복 또는 두 번째 속성을 만들지 않는 것이 좋습니다. 이 관찰을 통과하지 않기 때문에이 바인딩에 완벽하게 작동하지 않는 등

코드 :

<label>Is Hidden?<input type="checkbox" data-bind="checked: !isVisible()" /></label> 

참고 :이 Q & 스타일 질문입니다 - 내가 대답을 게시하도록하겠습니다 만, 나는 또한 어떤 다른 또는 개선 된 답변에 매우 관심

Answer 1

여기

의 등 checked, visible, enable,

으로, 바인딩의 단일 매개 변수 "부울"유형에 사용할 수있는 바인딩 "없습니다"

ko.bindingHandlers.not = { 
    init: function (element, valueAccessor, allBindingsAccessor, viewModel) { 
     //expects a single, truthy/falsy binding, 
     // such as checked, visible, enable, etc. 
     var binding = valueAccessor(); 
     var observable = binding[Object.keys(binding)[0]]; 
     var notComputed = ko.computed({ 
      read: function() { 
       return !observable(); 
      }, 
      write: function (newValue) { 
       observable(!newValue); 
      } 
     }); 
     var newBinding = {}; 
     newBinding[Object.keys(binding)[0]] = notComputed; 
     ko.applyBindingsToNode(element, newBinding, viewModel); 
    } 
}; 

난 정말 바인딩을 연마하기 위해 시도하지 않은, 그러나 완전한 기능을 것 같다 :

<input type="checkbox" data-bind="not: {checked: isVisible}" /> 

not 바인딩 :

사용은 다음과 같이 바인딩.

See the Fiddle