Knockout.js 绑定单选组不起作用答案

【问题标题】：Knockout.js binding radio group does not workKnockout.js 绑定单选组不起作用
【发布时间】：2013-04-12 00:59:20
【问题描述】：

我觉得自己很愚蠢，但我做不到:)

http://jsfiddle.net/btkmR/

我制作这个简单的 Fiddle 只是为了证明我在我的大项目中没有遗漏任何东西。

HTML：

<div>
    Preferred flavor
    <div><input type="radio" name="flavorGroup" data-bind="checked: cherryOn" /> Cherry</div>
    <div><input type="radio" name="flavorGroup" data-bind="checked: almondOn" /> Almond</div>
    <div><input type="radio" name="flavorGroup" data-bind="checked: mgOn" /> Monosodium Glutamate</div>
</div>

JS：

var viewModel = {
    cherryOn: ko.observable(true);
    almondOn: ko.observable(false);
    mgOn: ko.observable(false);
};

ko.applyBindings(viewModel);

我希望看到Cherry 在开始时被选中..

【问题讨论】：

除了杰里米的回答，你的小提琴没有引用淘汰赛，你的视图模型定义是非法的。使用对象文字表示法时，请使用逗号，而不是分号。

标签： javascript knockout.js

【解决方案1】：

来自 Knockout 的文档 (http://knockoutjs.com/documentation/checked-binding.html)：

对于单选按钮，KO 将设置要检查的元素当且仅如果参数值等于单选按钮节点的 value 属性。

示例：http://jsfiddle.net/btkmR/2/

<div>
    Preferred flavor
    <div><input type="radio" name="flavorGroup" value="cherry" data-bind="checked: flavor" /> Cherry</div>
    <div><input type="radio" name="flavorGroup" value="almond"  data-bind="checked: flavor" /> Almond</div>
    <div><input type="radio" name="flavorGroup" value="Monosodium"  data-bind="checked: flavor" /> Monosodium Glutamate</div>
</div>

var viewModel = {
    flavor: ko.observable("cherry")
};

ko.applyBindings(viewModel);

【讨论】：

啊哈！谢谢。我在想它是布尔值。现在说得通了

【解决方案2】：

对于那些像我一样正在努力使其与动态绑定的无线电组名称和值一起工作的人，请注意data-bind 中的绑定顺序。

以下将不起作用，因为 value 和 name 被绑定 checked:

<input 
    type="radio" 
    data-bind="
        checked: $parent.correctAnswerId, 
        attr: {name: 'correctAnswerFor' + $parent.id, value: id}
    "
/>

正确的顺序是：

        attr: {name: 'correctAnswerFor' + $parent.id, value: id},
        checked: $parent.correctAnswerId

【讨论】：

【解决方案3】：

我也有一个非常有趣的问题。如果您的单选输入值是数字并且您的模型可观察对象中有整数 - 将不会选择单选按钮。如果您将可观察值更新为“1”（数字作为字符串），那么它可以工作。不是很方便……

【讨论】：