ブール型のノックアウトラジオボタンバインド

Question

このFiddleに従って、実行すると作成されましたが、期待通りに「ブルーなし」オプションに値をバインドしません。

文字列値 "false"を渡すときに私がそこに述べたように、それはバインディングを行います。ノックアウトは型比較もしていることは明らかです。

私のアプリケーションでは、ビューモデルを作成するkomapperを使用しています。ブール値のプロパティの場合、ブール値を作成し、boolに変数を初期化します。 文字列に変換する必要がありますか？入力ラジオボタン要素では、常に文字列値を操作する必要があります。チェックボックスにブール値を使用できますか？

"checkedValue"を試してみましたが、まだ運がありません。

Answer 1

I だと思います。あなたは、後のバージョンのノックアウトで修正されたバグを経験しています。

それが仕事（とあなたがしようとしたような）すべきである方法：あなたがノックアウトバージョン3.4が含まれている場合

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

ko.applyBindings({ 
    isBlue: ko.observable(false) 
}); 

、それが期待どおりに動作：

ko.applyBindings({ 
 
    isBlue: ko.observable(false) 
 
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.0/knockout-min.js"></script> 
 

 
<label> 
 
    <input name="Test" type="radio" data-bind="checkedValue: true, checked: isBlue" /> Blue 
 
</label> 
 
<label> 
 
    <input name="Test" type="radio" data-bind="checkedValue: false, checked: isBlue" /> No Blue 
 
</label> 
 
<br /> 
 
<strong style="color: green">3.4.0: Does work</strong>

あなたはフィドル（2.1.0）で使用していたバージョンが含まれている場合

、それはしていません：

ko.applyBindings({ 
 
    isBlue: ko.observable(false) 
 
});

<script src="https://cloud.github.com/downloads/knockout/knockout/knockout-2.1.0.js"></script> 
 

 
<label> 
 
    <input name="Test" type="radio" data-bind="checkedValue: true, checked: isBlue" />Blue 
 
</label> 
 
<label> 
 
    <input name="Test" type="radio" data-bind="checkedValue: false, checked: isBlue" />No Blue 
 
</label> 
 
<br /> 
 
<strong style="color: red">2.1.0: Does not work</strong>

編集：いくつかのより多くの掘削後：Iドンそれが2.1.0のバグだとは思わない。 checkedValueはその時点で存在しませんでした！

ソースを見ると、チェックされた値を取得するためのロジックが2.1で非常に異なっていることがわかります。0およびそれ以降のバージョン：2.1.0では

：3.4.0で

if (element.type == "checkbox") { 
    valueToWrite = element.checked; 
} else if ((element.type == "radio") && (element.checked)) { 
    valueToWrite = element.value; 
} 

：

var checkedValue = ko.pureComputed(function() { 
    // Treat "value" like "checkedValue" when it is included with "checked" binding 
    if (allBindings['has']('checkedValue')) { 
    return ko.utils.unwrapObservable(allBindings.get('checkedValue')); 
    } else if (allBindings['has']('value')) { 
    return ko.utils.unwrapObservable(allBindings.get('value')); 
    } 

    return element.value; 
}); 

だから、明確な答えは次のようになります。3.4.0に更新、または作成3.4.0の動作を実装したカスタムチェックバインディング（バージョンの更新によってプロジェクトが中断される場合）

Answer 2

アイ内部でsrcバインディングはelement.valueを返します。ブラウザの場合はという文字列です。

通常

var checkedValue = ko.pureComputed(function() { 
    // Abbreviated, first KO does some stuff for other cases, but 
    // in the end it'll do: 

    return element.value; // Where `element` is the actual DOM element. 
}); 

、ブール値は、あなたが唯一の例半分にあなたの問題が発生したチェックボックスによって表されます（ここで：チェックされているに関連付けられている値を取得するため、この省略/注釈付きのコードで、the source fileをチェック"an inverse checked binding"のようなものが必要です）。あなたはまた、おそらく場合は、同様の機能を持つカスタム延長剤と仕事に行くことができ

viewModel.viewIsBlue = ko.computed({ 
    read: function() { return viewModel.isBlue().toLocaleString(); }, 
    write: function(newVal) { viewModel.isBlue(newVal === 'true'); } 
}); 

：

ソリューションは、（文字列を使用して）あなたが言及1と同様に、実際に観察に面し計算書き込み可能なを使用して、例えばが含まれますあなたはあまりにも頻繁に上記を繰り返すことがわかります。