Question

我试图使用Visible Binding来隐藏任何（0）或0的存款值。我的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或空值的都应该被隐藏。可见在这种情况下使用正确的绑定吗？如果是这样，我会很感激任何提示。谢谢！

Answer 1

您可以通过多种方式显示/隐藏元素。

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

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

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

看一下这个简化的片段：

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

Knockout Visible Binding Flop

1 个答案: