ノックアウトテキストを使ってDOMをバインドする方法_基礎知識

単純なバインド

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

今日のメッセージは:




KO は、要素の innerText (IE) または textContent (Firefox) にパラメーター値を設定します。および他の同様のブラウザ) 属性。元のテキストは上書きされます。

パラメータが監視可能である場合、要素のテキストはパラメータ値の変更に従って更新されます。そうでない場合、要素のテキストは 1 回だけ設定され、その後は更新されません。
渡したものが数値や文字列 (オブジェクトや配列など) でない場合、表示されるテキストは yourParameter.toString() と同等になります。
関数または式を使用してテキスト値を決定します
引き続き、上記の ViewModel に属性を追加し、依存関係監視属性を追加します

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

price: ko.observable(24.95)

viewModel.priceRating = ko.dependentObservable(
function () {
return this .price() > 50 ? "expensive" : "affordable";
}, viewModel);


バインディング用の UI ページ要素を追加します

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

項目は

価格の変化に応じて、テキストが「高価」と「手頃な価格」の間で切り替わります。