敲除可见绑定翻转

Question

我尝试使用可见绑定来隐藏=0或null的任何(存放)值。我继续在我的n00bish试验和错误尝试中失败。下面是KO的一个片段。

<tbody data-bind="foreach: children">
<!-- ko with: propertyBag -->
<tr data-bind="visible: $data.LLC_BI__Deposit__c_LLC_BI__Amount__c.value != null"  style="">
<td data-bind="if: $data.LLC_BI__Deposit__c_LLC_BI__Account__c &amp;&amp; $data.LLC_BI__Deposit__c_LLC_BI__Account__c.value">
    <span data-bind="text: LLC_BI__Deposit__c_LLC_BI__Account__c.displayValue">         

这个想法是，将列出5-6个存款，但任何具有0或空值的存款都应该隐藏。Visible是在这种情况下使用的正确绑定吗？如果有任何建议，我将不胜感激。谢谢!

Answer 1

有几种方法可以显示/隐藏元素。

Visible就是其中之一。它将使元素显示或隐藏(取决于您的条件)，但底层的html将保留在DOM中。

If binding是另一个，它创建或销毁DOM元素，而不是简单地隐藏它们。

正如在一条评论中指出的，你的条件是错误的，你只需要测试null。相反，您应该在viewModel中添加一个observable，它将包含显示/隐藏元素的逻辑。这允许您测试此属性，您可能想要这样做。

看一下这个简化的代码片段：

​

function accountVM(amount) {
  var _this = this;

  _this.balance = ko.observable(amount);

  _this.displayBalance = ko.computed(function() {
    return _this.balance() != null && _this.balance() !== 0;
  }, this);

  _this.decrement = function() {
    _this.balance(_this.balance() - 1);
  };
};

function myVM() {
  this.list = ko.observableArray([new accountVM(1), new accountVM(5), new accountVM(2), new accountVM(null)]);
};

ko.applyBindings(new myVM());

div.element {
  background-color: yellow;
  text-align: center;
  width: 100px;
  cursor: pointer;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>
<div data-bind="foreach: list">
  <div class="element" data-bind="visible: displayBalance, text: balance, click: decrement" title="decrement"></div>
</div>

​