Knockoutビジブルバインディングの使い方_基礎知識

単純なバインディング

最初に ViewModel を定義します

コードをコピーします コードは次のとおりです。

var AppViewModel = {
shouldShowMessage: ko.observable(true) ///div は初期化中に表示されます
};

AppViewModel.ShouldShowMessage = ko. observable(false); ///現在は非表示になっています
ko.applyBindings(AppViewModel);

を介して Knockout をアクティブにします。
次に、UI インターフェイス要素を定義します

コードをコピーします コードは次のとおりです:

このメッセージは、「ShouldShowMessage」が true 値を保持している場合にのみ表示されます。

この div を実行した後も、初期化中に表示することはできますが、その後 false に再割り当てされ、div が非表示になります。
パラメータ:
パラメータが false 値 (例: ブール値 false、数値 0、null、または未定義) に設定されている場合、バインディングは要素の style.display 値を none に設定します。 、要素が非表示になります。その優先順位は、CSS で定義するどの表示スタイルよりも高くなります。
パラメーターが true 値 (ブール値 true、または null 以外のオブジェクトまたは配列など) に設定されている場合、バインディングは要素の style.display 値を削除し、要素を表示します。すると、CSSでカスタマイズした表示スタイルが自動的に反映されます。
パラメータが監視可能な場合、要素の表示状態はパラメータ値の変更に応じて変化します。そうでない場合、要素の表示状態は 1 回だけ設定され、その後は更新されません。
関数または式を使用して要素の表示/非表示を制御する
JavaScript 関数または式をパラメータとして使用することもできます。この場合、関数または式の結果によって要素を表示/非表示にするかどうかが決まります。例:

コードをコピー コードは次のとおりです:

ViewModel に myValues のプロパティ値を追加します

同時に、 の配列に項目を追加しますmyValues
内の要素

は、コード をコピーします。コードは次のとおりです。 🎜>

このメッセージは、'myValues' に少なくとも 1 つのメンバーがある場合にのみ表示されます。

このように、「何らかの値」要素 myValues().length>0 を追加すると、結果は true
その後、この div が表示されます。