Knockout.js 第一次单击时，击出JS和单选按钮未绑定

我正在使用knockout JS开发一个瘦客户机，我对单选按钮有一些问题，我希望这里的人能够提供一些见解，了解是什么导致了这种情况，以及我可以做些什么来纠正这种情况

我有一个相当典型的单选按钮阵列布局

<p data-bind="text: background().description"></p>
<div data-bind="foreach: backgroundOptions" class="bg-options">
    <p data-bind="text: description" class="color-swatch"></p>
    <input type="radio" name="backgroundsGroup" data-bind="checked: $parent.backgroundId, value:id"/>
</div>​

​

您可以看到我正在绑定到父对象的backgroundId

父对象和正在显示的对象的JS如下所示：

var CardBackground = function(imagePath, swatchPath, id, description) {
    var self = this;

    var _imagePath = imagePath;
    self.imagePath = ko.observable(_imagePath);

    var _id = id;
    self.id = ko.observable(_id);

    var _description = description;
    self.description = ko.observable(_description);

    var _swatch = swatchPath;
    self.swatchPath = ko.observable(_swatch);
};

var Card = function() {
    var self = this;
    getBackgrounds = function() {
        var bgs = [
            new CardBackground("noCardLarge.jpg", "card_swatch-blue.jpg", -1, "None Selected"),
            new CardBackground("greenCard.jpg", "card_swatch-green.jpg", 10, "Green Contour Card"),
            new CardBackground("purpleCard.jpg", "card_swatch-purple.jpg", 11, "Purple Contour Card"),
            new CardBackground("redCard.jpg", "card_swatch-red.jpg", 12, "Red Contour Card"),
            new CardBackground("whiteCard.jpg", "card_swatch-white.jpg", 13, "White Contour Card"),
            new CardBackground("yellowCard.jpg", "card_swatch-yellow.jpg", 14, "Yellow Contour Card")
            ];
        return bgs;
    }
    self.backgroundOptions = getBackgrounds();

    var _defaultBackground = self.backgroundOptions[0];
    self.defaultBackground = ko.observable(_defaultBackground);

    var _background = self.defaultBackground();
    self.background = ko.observable(_background);

    self.backgroundId = ko.computed({
        read: function() {
            var values = self.backgroundOptions;
            return values.length ? values[0] : [];
        },

        write: function(newValue) {
            for (var i = 0; i < self.backgroundOptions.length; i++) {
                if (self.backgroundOptions[i].id() == newValue) {
                    self.background(self.backgroundOptions[i]);
                    return;
                }
            }
        },
        owner: this
    });
};

var cardcondground=函数（imagePath、swatchPath、id、描述）{
var self=这个；
var _imagePath=imagePath；
self.imagePath=ko.可观察（_imagePath）；
var _id=id；
self.id=ko.可观察（_id）；
var_description=描述；
自我描述=可观察（_描述）；
var_样本=样本路径；
self.swatchPath=ko.observable（_-swatch）；
};
变量卡=函数（）{
var self=这个；
getBackgrounds=函数（）{
var bgs=[
新卡片背景（“nocardlagle.jpg”、“card_-swatch-blue.jpg”、-1，“未选择”），
新卡片背景（“greenCard.jpg”，“card_-swatch-green.jpg”，10，“绿色轮廓卡”），
新卡片背景（“purpleCard.jpg”，“card_-swatch-purple.jpg”，11，“紫色轮廓卡”），
新卡片背景（“redCard.jpg”，“card_-swatch-red.jpg”，12，“红色轮廓卡”），
新卡片背景（“whiteCard.jpg”、“card_swatch-white.jpg”、13、“白色轮廓卡”），
新卡片背景（“yellowCard.jpg”、“card_-swatch-yellow.jpg”、14、“黄色轮廓卡”）
];
返回bgs；
}
self.backgroundOptions=getBackgrounds（）；
var_defaultBackground=self.backgroundOptions[0]；
self.defaultBackground=ko.observable（_defaultBackground）；
var_background=self.defaultBackground（）；
self.background=ko.observable（_background）；
self.backgroundId=ko.computed({
读：函数（）{
var值=self.backgroundOptions；
返回值.length？值[0]：[]；
},
写入：函数（newValue）{
对于（var i=0；i

现在，需要单击两次才能使绑定开始执行操作，然后从该点向前单击一次即可

此外，即使设置了默认值，也不会选择相应的选项框。如果更改默认背景上的索引，则上面的描述是正确的，但单选按钮不正确

我已经创建了一个这样的示例。

---

如果有人有任何见解，我们将不胜感激

要使其在初始绑定时选择defaultBackground，请更改self.Background的读取到

return _background.id();

因此，选中的绑定将获得“选定”背景的id，然后将无线电输入绑定的顺序切换到

"value:id, checked: $parent.backgroundId"

因此，值绑定将为输入分配一个值，该值是使选中的绑定正确工作所必需的

关于获得更改选项所需的双击，这是因为ViewModel中的id是整数，而生成的无线电输入中的值表示为字符串。修复将视图模型中的所有id用引号括起来，使其成为字符串

这里有一个更新的JSFIDLE。。。

---

谢谢，太好了。我将整数更改为字符串，绑定工作正常。我对绑定上的read值做了一点微调，以返回self.background（）.id（），而不是局部变量。请将其标记为已回答。双击解决方案为+1。一个快速的.toString（），按预期单击它。