如何使 Knockout 成为 Knockout 可见标签使用 display:none !important

Question

我有一个同时使用 knockout 和 bootstrap 的站点，我需要使用 knockout 可见数据绑定来根据给定条件添加和删除某些元素，但是，当 knockout 添加 style="display:none" 到 div 它被 bootstrap 覆盖，因为 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 数据绑定。 css 绑定向关联的 DOM 元素添加或删除一个或多个命名为 CSS 类的元素。

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

Answer 2

您可以使用 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 3

另一种解决方案是将元素包装在另一个元素中，并使用 Knockout 绑定包装元素的可见性。例如：

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

或者，为了避免破坏页面布局，您可以像这样使用 Knockout's containerless "if" syntax：

<!-- ko if: BooleanValue -->
    <div class="col-xs-1 hidden-md hidden-lg"></div>
<!-- /ko -->

这些解决方案都没有已经提出的答案那么优雅，但实施起来可能更快更容易，而且在我看来，它们的优点是避免了使用 !important 覆盖 [=20= 的潜在模糊世界]的样式。

如何使 Knockout 成为 Knockout 可见标签使用 display:none !important

How to make Knockout a knockout visible tag use display:none !important

css

twitter-bootstrap

knockout.js

twitter-bootstrap-3

knockout-3.0