Knockout Visible Binding Flop

Question

Ich versuche die sichtbare Bindung zu verwenden, um alle (Einzahlungs-) Werte zu verbergen, die = 0 ODER null sind. Ich scheitere weiterhin in meinen n00bischen Versuchs- und Fehlerversuchen. Unten ist ein Ausschnitt des 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">   

Die Idee ist, dass es 5-6 Einlagen aufgeführt sein, aber alle, die 0 oder Nullwerte haben sollte versteckt werden. Ist in diesem Fall die richtige Bindung sichtbar? Wenn ja, würde ich mich über alle Tipps freuen. Vielen Dank!

Answer 1

Sie haben mehrere Möglichkeiten, Elemente ein-/auszublenden.

Visible ist einer von ihnen. Es wird das Element angezeigt oder ausgeblendet (abhängig von Ihrer Bedingung), aber der zugrunde liegende HTML bleibt im DOM.

If binding ist ein weiterer, der die DOM-Elemente erstellt oder zerstört, anstatt sie einfach zu verstecken.

Wie in einem Kommentar angegeben, ist Ihr Zustand falsch, Sie testen nur für null. Sie sollten stattdessen eine Observable in Ihrem viewModel hinzufügen, die die Logik zum Anzeigen/Verbergen des Elements enthalten würde. Dies ermöglicht Ihnen, diese Eigenschaft zu testen, wie Sie möchten.

Werfen Sie einen Blick auf dieses vereinfachte Schnipsel:

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>