23

I have 2 values that I get from server A and B. I can only have one true at a time.

Again what I need is one of the radios to be checked at a time so one true value only.

var viewModel = {
    radioSelectedOptionValue: ko.observable("false"),
    A: ko.observable("false"),
    B: ko.observable("false") 
};
ko.applyBindings(viewModel);
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/2.1.0/knockout-min.js"></script>
<div class='liveExample'>    
        <h3>Radio View model</h3>
        <table>
        <tr>
            <td class="label">Radio buttons:</td>
            <td>
                <label><input name="Test" type="radio" value="True" data-bind="checked: A" />Alpha</label>
                <label><input name="Test" type="radio" value="True" data-bind="checked: B" />Beta</label>
            </td>
        </tr>
    </table>  
    A-<span data-bind="text: A"></span>
    B-<span data-bind="text: B"></span>
</div>

4

2 に答える 2

30

バインディングはchecked、ラジオ ボタンとチェックボックスでは異なります。

ドキュメントから：

ラジオ ボタンの場合、KO は 、パラメーター値がラジオ ボタン ノードの属性と等しい場合にのみ、要素をチェックするように設定します。valueしたがって、パラメーター値はstringである必要があります。

したがって、入力の属性を「A」と「B」に設定し、選択したオプションに応じて「A」または「B」を含むものにvalueバインドする必要があります。radioSelectedOptionValue

<label>
    <input name="Test" type="radio" value="A" 
             data-bind="checked: radioSelectedOptionValue" />
    Alpha
</label>
<label>
    <input name="Test" type="radio" value="B" 
             data-bind="checked: radioSelectedOptionValue" />
    Beta
</label>

Aブール値のプロパティ :とを保持したい場合は、 の値を使用/変換するように (読み取り専用、書き込み可能) にするB必要があります。ko.computedradioSelectedOptionValue

this.radioSelectedOptionValue = ko.observable();
this.A = ko.computed( {
        read: function() {
            return this.radioSelectedOptionValue() == "A";
        },
        write: function(value) {
            if (value)
                this.radioSelectedOptionValue("A");
        }
    }, this);

JSFiddle のデモ。

于 2013-04-28T06:15:02.633 に答える