2017-01-13 32 views
-1

让说我有:淘汰赛绑定选择单选按钮

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 

我如何: 经过单选按钮“否”,并指定值“否” this.myRadio如果用户从下拉选择“英语”了吗?

+0

我写的jQuery的功能,检查单选按钮,但它没有改变可观察的价值。 – Greg

+0

这听起来像你可能有一个关于目的或敲除的使用误区。我建议你从文档和例子开始。 http://knockoutjs.com/documentation/introduction.html –

回答

0

这里是低于可能的解决方案。使用单选按钮的检查绑定和选择的绑定选项。然后该值上的选择结合使用我观察到的计算如果http://knockoutjs.com/documentation/computed-writable.html用户选择英语改变的单选按钮的可写。你可以运行下面的例子。选择语言除了英语,设定需要翻译为YES,那么语言更改为英语,单选按钮,将更新到第

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>