Knockout JS和单选按钮在第一次点击时没有绑定

时间:2012-08-29 18:49:18

标签: knockout.js

我正在使用淘汰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
    });
};

现在需要两次点击才能让绑定最初采取行动,然后只需点击一下即可。

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

我已经创造了一个这样的例子 http://jsfiddle.net/JS2GV/2/

任何有识之士都会非常感激。

1 个答案:

答案 0 :(得分:6)

要让它在初始绑定时选择defaultBackground,请将self.backgroudId读取为...

return _background.id();

因此,选中的绑定将获得“选定”背景的ID,然后将无线电输入的绑定顺序切换为...

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

因此值绑定将为输入分配一个值,使得检查的绑定正常工作。

关于获得更改选项所需的双击,这是因为ViewModel中的id是整数,而生成的radio输入中的值表示为字符串。要修复视图模型中所有id的引号,以便它们是字符串。

这是一个更新的jsfiddle ...... http://jsfiddle.net/JS2GV/11/