Knockout bindet auswählen, um Radio-Button

Question

Lassen Sie sagen, ich habe:

function viewModel(){ 
    this.mySelect=ko.observable(); 
    this.myRadio=ko.observable(); 
}; 
ko.applyBindings(new ViewModel()); 

<select data-bind="value: mySelect"> 
    <option>select you language</option> 
    <option value="English">English</option> 
    <option value="French">French</option> 
    <option value="Italian">Italian</option> 
</select> 

Need translator: 
<input type="radio" name="needTransaltor" value="Y" data-bind="checked: myRadio">Yes 
<input type="radio" name="needTransaltor" value="N" data-bind="checked: myRadio">No 

Wie kann ich: Auf Optionsfeld „Nein“ und Wert „Nein“ this.myRadio zuweisen, wenn der Benutzer nach unten „English“ aus der Drop wählen?

Answer 1

Hier ist eine mögliche Lösung unten. Verwenden Sie die markierte Bindung für das Optionsfeld und die Optionen, die für die Auswahl bindend sind. Dann habe ich für den Wert, der an die Auswahl gebunden ist, eine schreibbare berechnete beobachtbare http://knockoutjs.com/documentation/computed-writable.html verwendet, um das Optionsfeld zu ändern, wenn der Benutzer Englisch wählte. Sie können das folgende Beispiel ausführen. eine Sprache außer Englisch wählen, wodurch die Notwendigkeit Übersetzer setzen dann auf Englisch auf Ja, um die Sprache zu ändern und das Optionsfeld Nr aktualisieren

function model() { 
 
    var self = this; 
 
    this.availableLanguages = ko.observableArray([ 
 
    'English', 
 
    'French', 
 
    'Italian' 
 
    ]); 
 
    this.needTranslator = ko.observable('N'); 
 
    this.language = ko.observable(''); 
 

 
    this.selectedLanguage = ko.pureComputed({ 
 
    read: function() { 
 
     return this.language(); 
 
    }, 
 
    write: function(value) { 
 
     if (value === 'English') { 
 
     this.needTranslator('N'); 
 
     } 
 
     this.language(value); 
 
    }, 
 
    owner: this 
 
    }); 
 

 

 
} 
 

 
var mymodel = new model(); 
 

 
$(document).ready(function() { 
 
    ko.applyBindings(mymodel); 
 
});

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

 
<p> 
 
    choose language: 
 
    <select data-bind="options: availableLanguages, 
 
value: selectedLanguage,   optionsCaption: 'Choose...'"></select> 
 
</p> 
 

 
Need Translator: 
 
<div> 
 
    <input type="radio" name="needTranslator" value="N" data-bind="checked: needTranslator" />No</div> 
 
<div> 
 
    <input type="radio" name="needTranslator" value="Y" data-bind="checked: needTranslator" />Yes</div>