knockout을 눈에 보이는 태그로 사용하는 방법 display : none! important

Question

나는 녹아웃과 부트 스트랩을 모두 사용하는 사이트를 가지고 있는데, 녹아웃 시각적 데이터 바인딩을 사용하여 주어진 기준에 따라 특정 요소를 추가 및 제거해야하지만, knockout add가 div에 style="display:none" 일 때, 작은 화면에서는 hidden-md 및 hidden-lg이 display:block !important이므로 부트 스트랩에 의해 무시됩니다.

<div class="col-xs-1 hidden-md hidden-lg" data-bind="visible: BooleanValue"></div> 

내 값이 표시되지 않도록 녹아웃 사용 style="display:none !important"을 만들 수있는 간단한 방법이 있나요?

건배.

Answer 1

당신은 바인딩 css를 사용하여 스타일 가이드의 (하단)에 스타일 규칙을 추가 할 수는 :

ko.applyBindings({booleanValue: ko.observable(true)});

.block { 
 
    display: block !important; 
 
} 
 

 
.hide-important { 
 
    display: none !important; 
 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script> 
 

 

 
<div class="block" data-bind="visible: booleanValue"> 
 
    visible binding 
 
</div> 
 

 
<div class="block" data-bind="css: {'hide-important': !booleanValue()}"> 
 
    css binding 
 
</div> 
 

 
<button data-bind="click: booleanValue.bind(null, !booleanValue())">toggle</button>

또는

, 당신은 사용자 지정 바인딩 볼을 구현할 수 :

ko.bindingHandlers['importantVisible'] = { 
 
    'update': function(element, valueAccessor) { 
 
    var show = ko.utils.unwrapObservable(valueAccessor()); 
 
    if (!show) 
 
     element.style.setProperty("display", "none", "important") 
 
    else 
 
     element.style.display = ""; 
 
     
 
    } 
 
}; 
 

 
ko.applyBindings({ booleanValue: ko.observable(true) });

.block { 
 
    display: block !important; 
 
} 
 

 
.hide-important { 
 
    display: none !important; 
 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script> 
 

 
<div class="block" data-bind="importantVisible: booleanValue"> 
 
    importantVisible binding 
 
</div> 
 

 

 
<div class="block" data-bind="visible: booleanValue"> 
 
    visible binding 
 
</div> 
 

 
<div class="block" data-bind="css: {'hide-important': !booleanValue()}"> 
 
    css binding 
 
</div> 
 

 
<button data-bind="click: booleanValue.bind(null, !booleanValue())">toggle</button>

Answer 2

css 데이터 바인딩을 사용할 수 있습니다. css 바인딩은 하나 이상의 명명 된 CSS 클래스를 연관된 DOM 요소에 추가하거나 제거합니다.

는

<div class="col-xs-1 hidden-md hidden-lg" data-bind="css: YourCss"></div> 

는