Knockout.js：单选按钮的第一次单击在3.0中不显示，在2.1-2.3中显示

debugcn 发表于 Dev

肯·蒂格

我遇到了Knockout.js相对常见的问题-每当第一次选择单选按钮时，对象模型中的值就会更新，但是单选按钮本身不会显示选择。在第二次选择时，该项目显示支票。

有趣的是，淘汰赛版本2可以正常运行！只有淘汰赛版本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，因此请随时提出批评。谢谢！

肯·蒂格

亚当·拉基斯（Adam Rackis）在Facebook上回答了这个问题。

淘汰赛3使用严格的比较，并且我还没有意识到输入值中的任何内容都是字符串。结果，单选按钮的值（字符串）从未与我的数据模型的值（数字）匹配。

更糟糕的是，我错过了文档提到您可以使用checkedValue绑定来设置非字符串值的问题。这是解决我的问题的正确方法，因为我希望数据模型的当前类型保留数字。

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

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。