Question

我有一个使用knockout和bootstrap的网站，我需要使用挖空可见数据绑定来添加和删除基于给定条件的某些元素，但是，当淘汰添加style="display:none"时div 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"。

{{1}}

是否有一种简单的方法可以使用{{1}}来淘汰我的价值？

干杯。

Answer 1

您可以使用css绑定并将样式规则添加到样式指南的（底部）：

＆＃13;

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

或者，您可以实现自定义可见绑定：

＆＃13;

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) });

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 2

您可以使用css数据绑定。 css绑定将一个或多个命名的CSS类添加或删除到关联的DOM元素。

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

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覆盖Bootstrap样式的潜在模糊世界。

如何使Knockout成为敲除可见的标签使用display：none！important

3 个答案: