使用计算将 KnockoutJS 绑定到单选按钮

Question

我有一个包含一系列答案的问题。每个答案都有一个名为 isRight 的布尔属性，表示答案是否...正确。

我正在尝试为每个答案呈现一个单选按钮，并检查该答案是否正确。如果用户单击不同的按钮，则该答案变为正确。

我了解KO将checked属性绑定到一个值，并且每个单选按钮只有在单选的值与绑定值匹配时才会被检查；你不能直接绑定到 isRight。

我在问题本身上放置了一个 computedObservable，它应该可以做到这一点。它有效。问题是，我想订阅单选按钮的 change 事件，以查看何时选择了新答案（并发送 ajax 请求）。我遇到的问题是 ko 绑定未在更改处理程序中更新。似乎延迟处理程序会给我想要的东西，但我更喜欢更直接的解决方案。

而且似乎 click 事件完美运行，但每次单击单选按钮时都会触发，即使它已经被选中。

有什么方法可以确保在更改事件中更新绑定？当前代码是 ko 2.0，我也尝试过 2.1。

Full Fiddle

---

完整来源：

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

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

    this.correctAnswer = ko.computed({
        read: function () {
            for (var i = 0, max = this.answers().length; i < max; i++)
                if (this.answers()[i].isRight())
                    return "answer-" + this.answers()[i].id();
        },
        write: function (newValue) {
            var newId = +newValue.split('-')[1];
            for (var i = 0, max = this.answers().length; i < max; i++)
                this.answers()[i].isRight(this.answers()[i].id() === newId);
        },
        owner: this
    });
}


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

$(function () {
    ko.applyBindings(new Question());

    $(document).on("change", "input[type='radio']", function () {
        var answer = ko.dataFor(this);
        var isRight = answer.isRight();

        setTimeout(function () { alert("before = " + isRight + "  after = " + answer.isRight()); }, 1000);
    });
});

---

HTML：

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

Answer 1

除非您有特定的理由订阅“更改”事件，否则您可能需要考虑使用 manual subscription 来表示正在更改的可观察对象。这样，您可以在实际数据发生更改时收到通知。

这是一个使用稍微不同的方法的示例：http://jsfiddle.net/rniemeyer/FvZXj/。它使用一个函数来处理设置值，它将当前答案作为第一个参数传递。然后它使用它来正确设置 isRight 和一个您可以订阅的可观察的 correctAnswer。