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

Knockout.js 第一次单击时,击出JS和单选按钮未绑定,knockout.js,Knockout.js,我正在使用knockout JS开发一个瘦客户机,我对单选按钮有一些问题,我希望这里的人能够提供一些见解,了解是什么导致了这种情况,以及我可以做些什么来纠正这种情况 我有一个相当典型的单选按钮阵列布局 <p data-bind="text: background().description"></p> <div data-bind="foreach: backgroundOptions" class="bg-options"> <p data-b

我正在使用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(),按预期单击它。