web-dev-qa-db-ja.com

ラジオボタンKnockoutjs

サーバーAとサーバーBから取得する値は2つあります。一度に1つの値しか取得できません。

繰り返しますが、必要なのは一度にチェックされる無線の1つなので、1つの真の値のみです。

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>
knockout.jsknockout-2.0
22
NoviceDeveloper

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

ドキュメント から：

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

したがって、入力のvalue属性を「A」および「B」に設定し、選択されたオプションに応じて「A」または「B」を含む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を保持する場合は、radioSelectedOptionValueの値を使用/変換するko.computed（読み取り専用、書き込み可能）にする必要があります。

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

デモ JSFiddle。

29
nemesv

Knockout 3.xは、checkedValueバインディングオプションを追加しました。これにより、文字列以外の値を指定できます。

    <input name="Test" type="radio" data-bind="checked: radioSelectedOptionValue, checkedValue: true" />
    <input name="Test" type="radio" data-bind="checked: radioSelectedOptionValue, checkedValue: false" />

http://jsfiddle.net/t73d435v/

23
Tim Yonker