在选择单选按钮时，单选按钮的标题值应添加到输入文本框中

Question

http://jsfiddle.net/LkqTU/45756/

<div class='liveExample'>   
<input type="radio" name="gender" value="Mr." checked>Mr.
    <input type="radio" name="gender" value="Mrs.">Mrs.
    <p>First name: <input data-bind='value: firstName' /></p> 

</div>



// Here's my data model
var ViewModel = function(gender) {

    this.lastName = ko.observable(gender);

    this.firstName = ko.computed(function() {

        return this.gender() +  this.firstname();
    }, this);
};

当单击单选按钮时，Mr。and Mrs应该添加在名字文本框的前面。

Answer 1

这应该工作：

 var ViewModel = function(gender) { this.lastName = ko.observable(gender); this.firstName = ko.computed(function() { return this.gender() + this.firstname(); }, this); }; function putMr() { document.getElementById('textField').value = 'Mr.'; } function putMrs() { document.getElementById('textField').value = 'Mrs.'; } 

 <input type="radio" name="gender" value="Mr." checked onclick="putMr()">Mr. <input type="radio" name="gender" value="Mrs." onclick="putMrs()">Mrs. <p>First name: <input data-bind='value: firstName' id="textField" /></p> 

我在单选按钮上使用onclick方法，然后将附加前缀的JS函数耦合到它。

Answer 2

我已经在“ http://jsfiddle.net/LkqTU/45804/ ”上更新了您的代码。 请看

将js更改为：

function setGender(obj){
document.getElementById('set_value').value = obj.value;
console.log(obj.value);

}

输入字段为：

<p>First name: <input data-bind='value: firstName' id="set_value"/></p> 

http://jsfiddle.net/LkqTU/45804/

Answer 3

您用敲除标记标记了这个问题。 但是你的小提琴是错误的。

我更新了您的视图模型：

a） this.lastName = ko.observable(gender); 应该是this.gender = ko.observable(gender);

b）我将this.firstName = ko.computed ...更改为可观察的this.firstName = ko.observable('');

而且您忘记了应用绑定： ko.applyBindings(new ViewModel('m')); 另外，在小提琴中，您需要添加jQuery，因为Knockout需要它。

那是：

var ViewModel = function(gender) {

    this.gender = ko.observable(gender);
    this.firstName = ko.observable('');

    this.fullData = ko.computed(function() {           
        return this.gender() + ' ' + this.firstName();
    }, this);
};

ko.applyBindings(new ViewModel('m'));

和：

<div class='liveExample'>   
    <input type="radio" name="gender" value="Mr." checked>Mr.
    <input type="radio" name="gender" value="Mrs.">Mrs.
    <p>First name: <input data-bind='value: firstName' /></p> 

</div>

现在，更改单选按钮以使用选中的绑定 ：

<input type="radio" name="gender" value="Mr."  data-bind="checked: gender"> Mr.
<input type="radio" name="gender" value="Mrs." data-bind="checked: gender"> Mrs.

这样，单击单选按钮时，视图模型将更新。

最后要做的是显示添加<span data-bind="text:gender"></span>的gender的值：

<p>First name: <span data-bind="text:gender"></span><input data-bind='value: firstName' /></p> 

这是更新的小提琴 。