ブール値を使用したノックアウトラジオボタンバインディング

debugcn 投稿 Dev

Dhanuka777

実行時に作成したこのフィドルによると、期待どおりに値が「青なし」オプションにバインドされません。

var viewModel = {    
    isBlue: ko.observable(false)
    //isBlue: ko.observable("false") this works
};

そこに述べたように、文字列値「false」を渡すと、バインディングが行われます。ノックアウトがタイプ比較も行うことは明らかです。

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

「checkedValue」で試してみましたが、まだ運がありません。

user3297291

私は考えてあなたがノックアウトの以降のバージョンで修正されたバグを経験しています。

それが機能する方法（そしてあなたが試したように）：

<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)
});

ノックアウトバージョン3.4を含めると、期待どおりに機能します。

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>

編集：もう少し掘り下げた後：2.1.0のバグではないと思います。checkedValueその時点では存在すらしていませんでした！

ソースを見ると、チェックされた値を取得するためのロジックが2.1.0以降のバージョン間で大きく異なることがわかります。

2.1.0の場合：

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

3.4.0では：

 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の動作を実装するカスタムチェックバインディングを作成します（バージョンの更新によってプロジェクトが破損する場合）

この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。

侵害の場合は、連絡してください[email protected]