Knockout.js：單選按鈕第一次單擊不顯示在3.0中，顯示在2.1-2.3中

Question

小提琴： http ： //jsfiddle.net/pr5YQ/7/

我遇到了Knockout.js的一個相對常見的問題 - 每當首次選擇單選按鈕時，對象模型中的值會更新，但單選按鈕本身不會顯示選擇。 在第二次選擇時，該項目顯示檢查。

有趣的是Knockout版本2正常工作！ 只有Knockout版本3才有問題。 在小提琴中，切換到任何版本的Knockout 2，表單根據需要工作。

我已經檢查了數據類型是否存在任何問題我將其設置為值（它們都是數字，應該沒問題）並且名稱/值設置似乎是正確的。 我希望如果我沒有做到上述任何一個，那么第一次點擊失敗將顯示在所有版本的Knockout中。

這是我所擁有的數據模型的片段：

        "Question_Ref": 1,
            "Question_Text": "Question 1",
            "Response_Ref": -1,
            "Response_Text": "",
            "Selected_Answer_Ref": -1,
            "Answers": [{
            "Answer_Ref": 1,
                "Answer_Text": "Yes",
                "Answer_Fails": false
        }, {
            "Answer_Ref": 2,
                "Answer_Text": "No",
                "Answer_Fails": false
        }]

這是我如何獲取數據對象本身並附加必要的KO綁定：

function AttachKOObjectsOnQuestion(question) {
    question.Selected_Answer_Ref_KO = ko.observable(question.Selected_Answer_Ref);
    question.Show_Response_KO = ko.computed({
        read: function () {
            if (!question.Selected_Answer_Ref_KO()) return null;
            if (question.Selected_Answer_Ref_KO() < 0) return null;
            for (selAnswerCount = 0; selAnswerCount < this.Answers.length; selAnswerCount++) {
                var answer = this.Answers[selAnswerCount];
                if (answer.Answer_Ref === this.Selected_Answer_Ref_KO()) {
                    return answer.Answer_Fails;
                }
            }
            return null
        },
        write: function (value) {},
        owner: question
    });
    var answerCount;
    for (answerCount = 0; answerCount < question.Answers.length; answerCount++) {
        AttachKOObjectsOnQuestionAnswer(question, question.Answers[answerCount]);
    }
}

function AttachKOObjectsOnQuestionAnswer(question, answer) {
    answer.ParentQuestion = question;
    answer.Selected_Answer_Ref_KO = ko.computed({
        read: function () {
            return answer.ParentQuestion.Selected_Answer_Ref_KO();
        },
        write: function (value) {
            var selectedAnswer = parseInt(value, 10);
            answer.ParentQuestion.Selected_Answer_Ref_KO(selectedAnswer);
        },
        owner: answer
    });
}

以下是單選按鈕的相關設置：

<table cellpadding="0" cellspacing="0">
    <tbody data-bind="foreach: Answers">
        <tr>
            <td>
                <input type="radio" data-bind="attr: { value: Answer_Ref, name: ParentQuestion.Question_Ref }, checked: Selected_Answer_Ref_KO, click: hideValidators" />
            </td>
            <td>
                <span data-bind="text: Answer_Text"></span>
            </td>
        </tr>
    </tbody>
</table>

這是我第一次使用Knockout和JSON，所以請隨意提出批評。 謝謝！

Answer 1

您的問題是您的checked綁定在radiobutton上是不正確的。 您正嘗試將checked綁定到名為Selected_Answer_Ref_KO的答案的屬性。 但是，您已將該對象添加到問題，而不是答案。

要解決此問題，只需將checked綁定更改為已checked: $parent.Selected_Answer_Ref_KO 。 我已經更新了你的小提琴這個改變和第一次點擊選擇工作對我來說。 您可以在http://jsfiddle.net/pr5YQ/5/找到該更新。

Answer 2

Adam Rackis在Facebook上回答了這個問題。

Knockout 3使用嚴格的比較，我沒有意識到輸入值中的任何內容都是字符串。 結果，單選按鈕值（字符串）從未匹配我的數據模型的值（數字）。

更糟糕的是，我錯過了文檔提到您可以使用checkedValue綁定來設置非字符串的值。 這是我的問題的正確解決方案，因為我希望我的數據模型的當前類型保持為數字。

<input type="radio" data-bind="attr: { name: ParentQuestion.Question_Ref }, checkedValue : Answer_Ref, checked: Selected_Answer_Ref_KO, click: hideValidators" />