Warning: file_get_contents(/data/phpspider/zhask/data//catemap/9/javascript/396.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Javascript Knockout.js:单选按钮首次单击在3.0中不显示,在2.1-2.3中显示_Javascript_Knockout.js - Fatal编程技术网

Javascript Knockout.js:单选按钮首次单击在3.0中不显示,在2.1-2.3中显示

Javascript Knockout.js:单选按钮首次单击在3.0中不显示,在2.1-2.3中显示,javascript,knockout.js,Javascript,Knockout.js,小提琴: 我在Knockout.js中遇到了一个相对常见的问题-每当第一次选择单选按钮时,对象模型中的值都会更新,但单选按钮本身并不显示选择。第二次选择时,该项显示检查 有趣的是,淘汰版2工作正常!只有淘汰版3有问题。在小提琴中,切换到击倒2的任何版本,表单将根据需要工作 我已经检查了我设置为值的数据类型是否存在任何问题(它们都是数字,应该可以),并且名称/值设置似乎是正确的。我希望,如果我没有做到上述任何一项,那么所有版本的Knockout都会显示第一次单击失败 以下是我拥有的数据模型的一个片

小提琴:

我在Knockout.js中遇到了一个相对常见的问题-每当第一次选择单选按钮时,对象模型中的值都会更新,但单选按钮本身并不显示选择。第二次选择时,该项显示检查

有趣的是,淘汰版2工作正常!只有淘汰版3有问题。在小提琴中,切换到击倒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
    });
}
函数附件对象问题(问题){
question.Selected\u Answer\u Ref\u KO=KO.observable(question.Selected\u Answer\u Ref);
问题。显示\u响应\u KO=KO({
读:函数(){
如果(!question.Selected\u Answer\u Ref\u KO())返回空值;
if(问题.所选答案参考值KO()<0)返回null;
for(selAnswerCount=0;selAnswerCount
以下是单选按钮的相关设置:

<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,所以请随意评论。谢谢大家!

您的问题是您选中的
绑定在radiobutton上不正确。您正在尝试将
选中的
绑定到您答案上名为
选定的\u答案\u参考\u KO的属性
。但是,您已将该对象添加到问题中,而不是答案中

要解决此问题,只需将您的
checked
绑定更改为
checked:$parent.Selected\u Answer\u Ref\u KO
。我已经更新了你的小提琴与这一变化和选择工作的第一次点击为我。你可以在上找到更新。

这在Facebook上得到了回答

敲除3使用严格的比较,我没有意识到输入值中的任何内容都是字符串。因此,单选按钮值(字符串)与数据模型的值(数字)从不匹配

更糟糕的是,我没有注意到文档中提到可以使用checkedValue绑定来设置非字符串的值。这是解决我的问题的正确方法,因为我希望数据模型的当前类型保持为数字

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


我已经回答了您的问题,但请在下次您提问时,试着编写一个脚本,而不是提供这段代码(cudos用于创建JSFIDLE,即使在最小的示例情况下,JSFIDLE也会有很大帮助)。在创建最简单的示例时,您可能会发现这个问题,即使您没有发现,想要帮助您的人需要阅读的代码也会少很多。谢谢。我本应该删除所有的垃圾(只是为了测试它是否导致了问题),但我忘记了。你不是唯一一个指出这一点的人,我需要在将来提供更好的可行示例。这里的简化代码:答案上实际上有一个同名的KO计算函数。如果返回到初始版本,您将看到在某些情况下应该显示/隐藏一个响应,而这不起作用的事实可能是没有设置值的迹象。也就是说,我应该开始使用$parent,而不是自己显式地添加parent对象。似乎我设置的每个属性都会降低页面呈现速度,所以我应该删除任何可以删除的内容。添加$parent并在中进一步简化。警报显示数据模型正在像以前一样更新。