Knockout Bindung an Radio-Box

Question

Ich habe Radio-Box. Dafür habe ich click Ereignis gebunden. Problem: Wenn diese Radio-Box von Anfang an überprüft werden sollte - es ist nicht.

Also ich möchte checked Ereignis hinzufügen. Aber das wird click Logik bremsen, so wird es wie Doppelklick aussehen.

Wie kann ich alle Ereignisse korrekt an Radio binden, ohne manuell click aufzurufen, wenn mein ViewModel erstellt wird?

<input data-bind="css: { checked: $component.isActiveGroup(value) }, 
           click: $component.setActiveGroup.bind($component, value), 
           checked: $component.activeGroup" 
        value={{value}} 
        type="radio" /> 

setActiveGroup(groupName: string) { 
    if (!groupName) { 
     return; 
    } 
    const isActive = this.isActiveGroup(groupName); 
    this.activeGroup(isActive ? '' : groupName); 
} 

isActiveGroup(groupName: string) { 
    return this.activeGroup() === groupName; 
} 

activeGroup = ko.observable(''); 

Answer 1

Die checked Bindung ist alles, was Sie benötigen standardmäßig:

var VM = function() { 
 

 
    this.activeGroup = ko.observable("A"); 
 
    this.activeGroup.subscribe(console.log.bind(console)); 
 

 
    this.isActiveGroup = groupName => { 
 
    return this.activeGroup() === groupName; 
 
    } 
 

 

 
    this.groups = ["A", "B", "C"]; 
 
} 
 

 

 
ko.applyBindings(new VM());

.checked { background: yellow; }

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

 
<!-- ko foreach: groups --> 
 
<label data-bind="css: { checked: $parent.isActiveGroup($data) }"> 
 
    <span data-bind="text: $data"></span> 
 
    <input type="radio" data-bind="value: $data, 
 
           checked: $parent.activeGroup" /> 
 
</label> 
 
<!-- /ko -->

Wenn Sie sich für "Toggle" -Funktion suchen, sollten Sie entweder type="checkbox" Eingänge erstellen oder erstellen zusätzliche Option none. Radioboxen sollen eine Auswahl pro Gruppe haben.

P.S. Um den überprüften Eingang zu stylen, können Sie auch den :checked CSS-Selektor verwenden. In meinem Beispiel wählte ich, um die Umgebung label zu stylen.