2013-05-03 2 views
1

나는이 체크 박스를 체크했을 때 "not true"액션을 수행하기 위해 knockout js에 입력 유형 체크 박스를 가지고있다. 다음과 같은 것 :knockout js에서 true가 아닌 체크 바인딩을 수행 하시겠습니까?

<input type="checkbox" data-bind="checked: !IsVisible"/> 

그러나 이것은 작동하지 않습니다. IsHidden을 호출하고 일반적인 체크 바인딩을 설정할 수 있다는 것을 알고 있지만 마녀에는 특별한 상황이 있습니다.이 동작이 필요합니다.

+0

를 재미있는 연습, 나는 Q & 일반적인 바인딩 "하지"를 보여 질문을 게시 , 이렇게하면 html을 다음과 같이 작성할 수 있습니다 :''(http://stackoverflow.com/q/16368784/91189) –

답변

2

바인딩에서 관찰 가능 항목을 직접 평가할 수 있으며 아이디어가 효과가 있습니다. 이 같은

: <input type="checkbox" data-bind="checked: !IsVisible()"/>

참고 그러나, 이것은 당신이 원하는 아마되지 않습니다 "관찰"을 잃는다.

대안은 IsVisible에서 계산 된 IsHidden 속성을 만드는 것입니다.

var ViewModel = function (model) { 
    var self = this; 
    self.IsVisible = ko.observable(model.IsVisible); 
    self.IsHidden = ko.computed({ 
     read: function() { 
      return !self.IsVisible(); 
     }, 
     write: function (newValue) { 
      self.IsVisible(!newValue); 
     } 
    }); 
} 

See the Fiddle

+0

정확하게, 나는 관측 가능성을 잃어 버리고 싶지 않다. –

0

이 때문에로입니다! 당신은 관측 가능에 대한 함수를 수행하고 있습니다. 이를 사용하십시오 :

<input type="checkbox" data-bind="checked: !IsVisible()"/> 
+0

아, 그냥 정확하게 이전의 대답을 읽어라. –

5

사용자 정의 바인딩을 정의하십시오. "Simplifying and cleaning up views in KnockoutJS"을 참조하십시오. 섹션에는 요청한 것과 매우 유사한 섹션이 있습니다. (: 테스트하지 참고) : 기본적으로,이 같은 일을해야

ko.bindingHandlers.notChecked = { 
    update: function(element, valueAccessor) { 
    var value = ko.utils.unwrapObservable(valueAccessor()); 
    ko.bindingHandlers.checked.update(element, function() { return!value; }); 
    } 
}; 

그런 다음 당신이 할 수 있습니다 :

data-bind="notChecked: IsVisible"