4

私はノックアウト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
    });
};

現在、バインディングが最初にアクションを実行するのに2回クリックする必要があり、その後、その時点から1回クリックするだけです。

さらに、デフォルト値が設定されていても、それぞれのオプションボックスは選択されていません。デフォルトの背景のインデックスを変更した場合、上記の説明は正しいですが、ラジオボタンは正しくありません。

この例を作成しました。
http://jsfiddle.net/JS2GV/2/

誰かが持っているかもしれないどんな洞察も大いにありがたいです。

4

1 に答える 1

6

初期バインド時にdefaultBackgroundを選択するには、self.backgroudIdの読み取りを...に変更します。

return _background.id();

したがって、チェックされたバインディングは「選択された」背景のIDを取得し、ラジオ入力のバインディングの順序を...に切り替えます。

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

したがって、値バインディングは、チェックされたバインディングを正しく機能させるために必要な値を入力に割り当てます。

オプションを変更するために必要なダブルクリックに関しては、ViewModelのIDが整数であり、生成されたラジオ入力の値が文字列として表されているためです。修正するには、ビューモデル内のすべてのIDを引用符で囲み、文字列になるようにします。

これが更新されたjsfiddleです... http： //jsfiddle.net/JS2GV/11/

于 2012-08-29T20:04:50.420 に答える