Knockout sichtbare Bindung in einem Modal

Question

Ich habe ein Modal, das Text anzeigen muss basierend darauf, ob eine Eigenschaft in meinem Ansichtsmodell wahr ist oder nicht. Ich habe einen Ajax-Anruf eingerichtet, um diese Informationen zu bestimmen, aber ich bin nicht sehr vertraut mit Knockout und brauche etwas Hilfe bei der Bindung.

Ich muss alles in der "berechtigten" div anzeigen, wenn die Eigenschaft wahr ist und wenn es falsch ist, zeigen Sie alles in der "nicht zulässig" div statt. Unten ist ein stromlinienförmiger Teil davon.

<div class="modal-body" id="orderStatus"> 

    <div class= "eligible" data-bind="visible: Eligible"> 
     <p>text</p> 
     <div class="modal-footer"> 
      //button 
     </div> 
    </div> 

    <div class= "ineligible" data-bind="visible: !Eligible"> 
     <p>text</p> 
     <div class="modal-footer"> 
      //button 
     </div> 
    </div> 

</div> 

Answer 1

Sie können keine visible binding als falsche Klausel verwenden, es wahr sein muss. Um das zu beheben, würde ich keine visible binding verwenden, würde ich es in eine ko if wickeln es ist die Art, wie diese Situation getan werden sollte. Wenn die Knockout-Aktualisierung bei jeder Änderung des Werts aktualisiert wird, funktioniert dies genauso wie die visible-Klausel.

<div class="modal-body" id="orderStatus"> 
<!-- ko if: Eligible() --> 
    <div class= "eligible"> 
     <p>text</p> 
     <div class="modal-footer"> 
      //button 
     </div> 
    </div> 
<!-- /ko--> 
<!-- ko if: !Eligible() --> 
    <div class= "ineligible" data-bind="visible: !Eligible"> 
     <p>text</p> 
     <div class="modal-footer"> 
      //button 
     </div> 
    </div> 
<!-- /ko--> 
</div> 

Wenn Ihre Sorgen um die DOM das Element zu entfernen jedes Mal, wenn Sie die css binding verwenden können und eine Klasse zu Ihrem Element hinzuzufügen.

<div class="modal-body" id="orderStatus"> 
    <div class= "eligible" data-bind="css: { hide: Eligible() }"> 
     <p>text</p> 
     <div class="modal-footer"> 
      //button 
     </div> 
    </div> 
    <div class= "ineligible" data-bind="css: { hide: !Eligible() }"> 
     <p>text</p> 
     <div class="modal-footer"> 
      //button 
     </div> 
    </div> 
</div> 

CSS:

.hide { display:none; } 

Dies wird ebenso wie die sichtbare Bindung arbeiten.

Answer 2

Ich bin mir nicht sicher, wie man den Knockout hinter dieser bedingten Logik auf meiner Ansicht schreibt. Wenn ich nur Rasiermesser, schreibe ich würde @if (Model.IsEligible) {...} else {...} auf die Daten-bind Linie

Sie so etwas wie dies nutzen könnten in Ihrer Rasiermesseransicht. Wenn Sie ein @section-Skript {} definiert haben, das auf Ihren Kopfbereich in HTML verweist. Sie müssen eine JS-Variable einrichten, damit Sie sie in Ihrer JS-Datei aufrufen können, in der Sie ko instanziieren.

<script> 
    window.source = @Html.Raw(Json.Encode(Model)) 
</script 

Ich denke, das ist, was Sie suchen ...?

https://jsfiddle.net/24k3dLmb/5/

Answer 3

Der Code, den Sie haben, ist perfekt. Alles, was Sie jetzt noch brauchen, ist, das Knockout ViewModel seine Eligible Observable auf den booleschen Wert zu setzen, den Sie vom Server erhalten. Versuchen Sie Folgendes:

YourViewModel = function(item) { 
    var _self = this; 

    _self.Eligible = ko.observable(@Json.Encode(Model.IsEligible)); 
} 

Die oben in Fall ist Ihre Frage kommende Objekt noch clientseitige ändern können. Wenn Sie das nicht brauchen, Sie brauchen es nicht beobachtbar und Ihren Code sein würde:

YourViewModel = function(item) { 
    var _self = this; 

    _self.Eligible = @Json.Encode(Model.IsEligible); 
} 

Answer 4

wenn Sie wollen nicht verwenden, was @ Josh Stevens erwähnt, können Sie einfach eine andere definieren Variable in Ihrem Modell und setzen Sie diese Variable, indem Sie 'Eligible' abonnieren, dann können Sie weiterhin sichtbar verwenden, um DOM sowohl für berechtigte als auch für nicht in Frage kommende beobachtbare Variablen ein- und auszublenden.

in Ihrem Modell hinzufügen:

self.Ineligible = ko.observable(false); 

self.Eligible.subscribe(function (value) { 
    self.Ineligible(!value); 
}); 

Ihrer Ansicht ändern:

<div class="modal-body" id="orderStatus"> 

    <div class="eligible" data-bind="visible: Eligible"> 
    <p>text</p> 
    <div class="modal-footer"> 
     //button 
    </div> 
    </div> 

    <div class="ineligible" data-bind="visible: Ineligible"> 
    <p>text</p> 
    <div class="modal-footer"> 
     //button 
    </div> 
    </div> 

</div> 

Edit: Schnell Art und Weise: nur <div class="ineligible" data-bind="visible: Eligible() == 0 "> Ihrer Ansicht hinzufügen, damit, wenn Eligible ist false, das Ergebnis dieses Vergleichs wäre wahr

<div class="modal-body" id="orderStatus"> 
     <div class="eligible" data-bind="visible: Eligible"> 
     <p>text</p> 
      <div class="modal-footer"> 
       //button 
      </div> 
     </div> 
     <div class="ineligible" data-bind="visible: Eligible() == 0 "> 
     <p>text</p> 
     <div class="modal-footer"> 
       //button 
     </div> 
     </div> 
    </div>