가시성 스타일 바인딩을 사용 knockout.js 바인딩

Question

data-bind="style : { display : repeat() === 'Custom' ? 'block' : 'none' }" 

이 스타일은 다음

data-bind="style : { visibility : repeat() === 'Custom' ? 'visible' : 'hidden' }" 

왜 실패로 녹아웃을 사용하여 성공 실패?

필자는 시각적으로 볼 수있는 바인딩을 사용할 수 있지만 내 경우에는 숨겨진 경우에도 해당 div 공간을 잃고 싶지 않습니다.

어떻게하면됩니까?

jquery를 사용하여 이미이 작업을 성공적으로 수행하고 싶지는 않습니다.

Answer 1

또 다른 옵션 : 귀하의 바인딩

self.hidden = ko.computed(function() { 
    return self.repeat() !== 'Custom'; 
}) 

은 CSS에서이 간단한 data-bind="css: { hide: hidden }"

은 다음 클래스를 제공하는 지금이다. 그 소리는 어렵지만, 정말 쉽고 KO는 맞춤 바인딩을 염두에두고 설계되었습니다. 기본 패키지에 더 많은 패키지가 있으면 좋겠지 만 만들 수는 없습니다. 이 솔루션의 장점은 바인딩이 간단하고 쉽게 읽을 수 있다는 것입니다.

ko.bindingHandlers.hidden = (function() { 
    function setVisibility(element, valueAccessor) { 
     var hidden = ko.unwrap(valueAccessor()); 
     $(element).css('visibility', hidden ? 'hidden' : 'visible'); 
    } 
    return { init: setVisibility, update: setVisibility }; 
})(); 

을 그리고 귀하의 HTML에 사용 : 예를 들면 다음과 같습니다 숨겨진라는

data-bind="hidden: !repeat()" 

Answer 2

css 바인딩 http://knockoutjs.com/documentation/css-binding.html을 사용하는 것이 좋습니다. 당신도 관찰 할 수있는 computed으로 모든 것을 정리할 수 있습니다. 이 문제가 자신의 바인딩을 만드는 것입니다 해결하기

.hide { 
    visibility: 'hidden'; 
} 

Answer 3

난 그냥 아주 비슷한 일을했고 이것은 나를 위해 일한 : 차이

data-bind="style : { visibility : repeat() === 'Custom' ? '' : 'hidden' }" 

visible 대신 visibility을 ''으로 설정하고 있습니다.