녹아웃 보이는 바인딩 스타일 디스플레이 인라인 작동하지 않습니다

Question

녹아웃에서 visible 바인딩을 사용하고 있습니다. h3 html 요소를 display:inline으로 설정하고 싶습니다. 그러나 바인딩이 발생하면 인라인 CSS display: inline이 지워지고 다시 되돌아옵니다. visible 바인딩을 사용하지 않으면 문제가 없습니다.

<div style='display: inline'> 
    <label style='display: inline'>Product Total</label> 
</div> 
<div style='display: inline'> 
    <h3 style='display: inline' data-bind='visible: Total() > 3, text: Total'></h3> 
</div> 

문제를 재현하는 3 위의 값을 입력 : 당신이 (가) inline을 지원하는 사용자 지정 바인딩을 만들 필요가 있으므로, http://jsfiddle.net/ryandxavier/ung4z/

Answer 1

visible는 ""와 "none" 사이의 요소의 가시성 togles 바인딩 디스플레이 :

가시적 인 source code을 기준으로하면 (이 전달을 매개 변수로 더 좁은 표시 값으로 확장 할 수 있습니다) :

당신의 HTML에서 5,

ko.bindingHandlers['visibleInline'] = { 
    'update': function (element, valueAccessor) { 
     var value = ko.utils.unwrapObservable(valueAccessor()); 
     var isCurrentlyVisible = !(element.style.display == "none"); 
     if (value && !isCurrentlyVisible) 
      element.style.display = "inline"; 
     else if ((!value) && isCurrentlyVisible) 
      element.style.display = "none"; 
    } 
}; 

및 사용 :

<h3 style='display: inline' data-bind='visibleInline: Total() > 3, text: Total'></h3> 

데모 JSFiddle.

또는

당신의 용기없는 구문을 사용할 수 있습니다 및 visible 대신 if를 당신의 h3 구속력을 넣어 사용하지 않는 대체 솔루션으로 :

<h3 style='display: inline'> 
    <!-- ko if: Total() > 3 --> 
     <!-- ko text: Total --><!-- /ko --> 
    <!-- /ko --> 
</h3> 

데모 JSFiddle.

Answer 2

data-bind="style: { display: yesOrNo() ? 'inline' : 'none' }"