knockoutを目に見えるタグで表示する方法：none！important

Question

私はノックアウトとブートストラップの両方を使用するサイトを持っていますが、ノックアウトの可視データバインディングを使用して特定の要素を追加したり削除したりする必要があります。ノックアウト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バインディングは、1つまたは複数の名前付きCSSクラスを関連付けられたDOMエレメントに追加または削除します。

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