ノックアウトテキストを使って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 ページ要素を追加します

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

項目は

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

HTML エンコーディングについて
このバインディングは (innerHTML ではなく) 要素の innerText または textContent を設定するため、安全であり、HTML やスクリプト インジェクションのリスクはありません。例: 次のコードを作成した場合:

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

viewModel.myMessage( "Hello, world!");

斜体は表示せず、ラベルをそのまま出力します。 HTML コンテンツを表示する必要がある場合は、HTML バインディングを参照してください。

IE 6 の空白について
IE6 には、スパン内にスペースがあると、自動的に空のスパンになってしまうという奇妙な問題があります。次のようなコードを書きたい場合、Knockout は効果がありません。