Knockout JS: Conditional Switch Case

Question

Meine aktuelle Aufgabe ist es, knockout js bedingten zu ersetzen, wenn Fall (oder wie mehrere, wenn Groß- und Kleinschreibung) wechseln, um mehr als zwei Bedingungen zu überprüfen. Das Szenario ist, wenn der Benutzer authentifiziert wird, sollte das Toggle-Symbol in grüner Farbe sichtbar sein und für nicht authentifizierte Benutzer sollte das Toggle-Symbol in grauer Farbe sein. Unten ist der Code für das Szenario, das ich hier angegeben habe, IsAuthenticatedUser() ist ein Bool-Wert, der immer wahr oder falsch ist. Jetzt muss ich den bool (0 1) -Wert auf flag (0 1 2 3) ändern.

Bool representation is, 
0 - Not Authenticated - grey icon 
1 - Authenticated - green icon 

Flag Value 
0 - Not Authenticated - grey icon 
1 - Authenticated - green icon 
2 - Authenticated but expired - no icon 
3 - Authenticated but not yet license period started - no icon 

Für Bool Wert der Knockout JS bedingte Trennung ist wie,

<!-- ko if: IsAuthenticatedUser() --> 
<i class="fa fa-toggle-on faIcons green" title="Active" 
    data-bind="click: function (data, event) { $parent.functiongoeshere }"></i> 
<!-- /ko --> 

<!-- ko if: !IsNotAuthenticatedUser() --> 
<i class="fa fa-toggle-on faIcons fa-rotate-180 toggleOff" title="Inactive" 
    data-bind="click: function (data, event) { $parent.functiongoeshere }"></i> 
<!-- /ko --> 

Für Flag-Wert, habe ich so etwas wie unten zu tun,

<!-- ko if: UserFlag == 1 --> 
<i class="fa fa-toggle-on faIcons green" title="Active" 
    data-bind="click: function (data, event) { $parent.functiongoeshere }"></i> 
<!-- /ko --> 

<!-- ko if: UserFlag == 0 --> 
<i class="fa fa-toggle-on faIcons fa-rotate-180 toggleOff" title="Inactive" 
    data-bind="click: function (data, event) { $parent.functiongoeshere }"></i> 
<!-- /ko --> 

<!-- ko if: UserFlag == 2 --> 
<!-- No ICON --> 
<!-- /ko --> 

<!-- ko if: UserFlag == 2 --> 
<!-- No ICON --> 
<!-- /ko --> 

Aber das funktioniert nicht, Gibt es also eine andere Möglichkeit zu verwenden, wenn für die Überprüfung mehrerer Bedingungen oder wie können wir Benutzer die Steuerung wechseln, um dieses Szenario zu behandeln.

Jeder Vorschlag wäre hilfreich.

Answer 1

Ihre ko if: UserFlag sollte funktionieren, obwohl ich es userFlag ändern würde und man könnte es ko if: userFlag()

auch sein müssen, warum es nicht einfach halten und eine getAuthClass() Funktion, erstellen und die Elementattribute binden und berechnen alle Symbole im ViewModel?

Answer 2

Statt 4 <!-- ko if --> würde ich stattdessen die Logik auf das Ansichtsmodell verschieben.

Aus meiner Erfahrung ist es immer besser, so wenig Logik wie möglich in der Ansicht zu haben.

Bewegliche Logik zum Anzeigen des Modells ermöglicht es Ihnen, Ihr Verhalten in einer Einheit zu testen, während es schwierig ist, das Rendering der Ansicht zu testen. Außerdem sind komplexe Ansichten aufgrund der zu verwendenden ausführlichen Syntax, wie z. B. <!-- ko if --> oder Komplex data-bind, tendenziell weniger lesbar als ein komplexes Ansichtsmodell.

Ich habe versucht, ein vereinfachtes Beispiel zu erstellen, das Ihren Anforderungen entspricht, wobei die gleiche Vorlage je nach Status des Benutzers unterschiedlich angezeigt wird. Um das zu tun, benutze ich die css binding.

Klicken Sie auf die Seite, um den Status des Benutzers zu ändern.

var myVM = function() { 
 
    var _this = this; 
 
    _this.status = ko.observable(2); 
 
    
 
    _this.authenticationStyle = ko.computed(function() { 
 
     if (_this.status() == 0) return "anonymous"; 
 
     if (_this.status() == 1) return "expired"; 
 
     return "authenticated"; 
 
    }, this); 
 
    
 
    _this.statusText = ko.computed(function() { 
 
     if (_this.status() == 0) return "please log in"; 
 
     if (_this.status() == 1) return "please refresh"; 
 
     return "welcome"; 
 
    }, this); 
 
}; 
 

 
var vm = new myVM(); 
 
ko.applyBindings(vm); 
 

 
window.onclick = function() { 
 
    var newStatus = vm.status() + 1; 
 
    if (newStatus > 2) 
 
    newStatus = 0; 
 
    vm.status(newStatus); 
 
};

.anonymous { 
 
    display: none; 
 
} 
 
.expired { 
 
    color: lightgrey; 
 
    background-color: yellow; 
 
} 
 
.authenticated { 
 
    color: black; 
 
    background-color: green; 
 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script> 
 

 

 
<div data-bind="css: authenticationStyle"> 
 
    <div data-bind="text: statusText"></div> 
 
</div>