9

名前 + チェックボックスの一方向バインディングは正常に機能しますが、最初はラジオ ボタン employeeTypeA では機能しませんが、その値はビューモデルで true ですが、html でラジオ ボタンが設定されていないと表示されるのはなぜですか?

   <script type="text/javascript">

        $(function()
        {
            var PersonViewModel = function()
            {
                this.firstName = ko.observable('Lisa');
                this.lastName = ko.observable('T');
                this.isCustomer = ko.observable(true);
                this.employeeTypeA = ko.observable(true);
                this.employeeTypeB = ko.observable(false);
            };

            var personViewModel = new PersonViewModel();
            ko.applyBindings(personViewModel, $('data').get(0));
        });
    </script>

    <div id="data">
        <span data-bind="text: firstName"></span>
        <span data-bind="text: lastName"></span>
        <input type="checkbox" data-bind="checked: isCustomer" title="Is a customer" />
        <input name="x" type="radio" data-bind="checked: employeeTypeA" title="Employee type A" />
        <input name="x" type="radio" data-bind="checked: employeeTypeB" title="Employee type B" />
    </div>
4

1 に答える 1

9

checkedバインディングは、ドキュメントから、ラジオ ボタンの動作が異なります。

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

PersonViewModelしたがって、次のように変更する必要があります。

var PersonViewModel = function()
{
    this.firstName = ko.observable('Lisa');
    this.lastName = ko.observable('T');
    this.isCustomer = ko.observable(true);
    this.employeeType = ko.observable('TypeB');                
};

そしてあなたのラジオボタン：

<input name="x" type="radio" data-bind="checked: employeeType" 
       value="TypeA" title="Employee type A" />
<input name="x" type="radio" data-bind="checked: employeeType" 
       value="TypeB" title="Employee type B" />

JSFiddle のデモ。

employeeTypeAとプロパティを保持したい場合employeeTypeBは、型を返す計算されたプロパティを導入できます。

this.employeeTypeA = ko.observable(false);
this.employeeTypeB = ko.observable(true);
this.employeeType = ko.computed(function()
{
     if (this.employeeTypeA())
        return 'TypeA';
     if (this.employeeTypeB())
        return 'TypeB';
},this);

この場合もvalue、ラジオ ボタンに属性を追加する必要があります。

JSFiddle のデモ。

于 2013-04-06T17:14:42.097 に答える