通过 $parent 绑定绑定单选按钮答案

【问题标题】：Binding a radio button through the $parent binding通过 $parent 绑定绑定单选按钮
【发布时间】：2012-04-24 02:43:29
【问题描述】：

我在foreach 循环中生成单选按钮。我正在尝试将选中的属性绑定到父级中的基本 observable。不幸的是，当单击单选按钮时，单击处理程序中似乎没有更新父属性。

基于一些previous work，似乎点击处理程序应该是在视图模型上获取更新值的可接受位置。最奇怪的是，在您单击单选按钮几次之后，似乎开始出现正确的值。

Full Fiddle

代码：

function Question() {
    this.name = "My Question";

    this.answers = ko.observableArray([
        new Answer(1, "Answer 1", false),
        new Answer(2, "Answer 2", true),
        new Answer(3, "Answer 3", false)]);

    this.correctAnswer = ko.observable(2);
}

function Answer(id, name, isRight) {
    this.id = ko.observable(id);
    this.name = ko.observable(name);
    this.isRight = ko.observable(isRight);
}

ko.applyBindings(new Question());

$(document).on("click", "input[type='radio']", function () {
     var answer = ko.dataFor(this);
     var question = ko.contextFor(this).$parent;

     var answerId = answer.id();
     var correctAnswer = question.correctAnswer();

     alert(answerId + " should equal " + correctAnswer + 
           (answerId === correctAnswer ? " SWEET" : " DAMNIT"));
});

HTML

<div data-bind="text:name"></div>
<div data-bind="foreach:answers">
    <label>
        <span data-bind="text: name"></span>
        <input type="radio" name="X" data-bind="value: id, checked:$parent.correctAnswer" />
    </label>
    <br />
</div>

【问题讨论】：

标签： javascript knockout.js

【解决方案1】：

当您将选中的值绑定到 $parent.correctAnswer 时，这是一种双向绑定，这意味着您将正确答案更新为您单击的任何内容。

我建议将其替换为：

checked:$parent.isCorrectAnswer()

这是一个 ko.computed，它总是返回正确的答案，但也可以在所选值发生变化时提醒您

this.isCorrectAnswer= ko.computed(function () {        
    alert('your message');
    return 2;//return correct answer
});

代码未经测试并提供给您：)

【讨论】：

【解决方案2】：

改变

answerId === correctAnswer

到

answerId == correctAnswer

让它每次都能正常工作。

希望这会有所帮助！

【讨论】：