css - 如何使 Knockout 成为 Knockout 可见标签使用 display :none ! 重要

Question

我有一个同时使用 knockout 和 bootstrap 的站点，我需要使用 knockout 可见数据绑定(bind)来根据给定条件添加和删除某些元素，但是，当 knockout 添加 style="display:none"时 到 div 它会被 Bootstrap 覆盖，因为 hidden-md 和 hidden-lg 使用 display:block !在较小的屏幕上很重要。

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

是否有一种简单的方法可以使用 style="display:none !important" 来使我的值不显示？

干杯。

Answer 1

您可以使用 css 绑定(bind)并将样式规则添加到样式指南的(底部):

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>

或者，您可以实现自定义可见绑定(bind):

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>