Knockout.js绑定无线电组不起作用

Question

我觉得真的很蠢,但不能让它工作:)

http://jsfiddle.net/btkmR/

我做了这个简单的小提琴只是为了证明我在大项目中没有遗漏任何东西.

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在开始时看到选中..

Answer 1

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

对于单选按钮,当且仅当参数值等于单选按钮节点的value属性时,KO才会设置要检查的元素.

示例: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);

Answer 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