コミュニティ 学ぶ ツールライブラリ レジャー
検索
日本語
ホームページ > ウェブフロントエンド > jsチュートリアル > ノックアウトテキストを使ってDOMをバインドする方法_基礎知識

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

WBOY
リリース： 2016-05-16 17:15:04
オリジナル
1042 人が閲覧しました
単純なバインド
コードをコピー コードは次のとおりです。

今日のメッセージは:




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 は効果がありません。
関連ラベル：
Knockout text绑定
ソース：php.cn
前の記事：JavaScript – Apple デバイス検出のサンプル コード_JavaScript のヒント 次の記事：Knockoutビジブルバインディングの使い方_基礎知識
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
最新の問題
function_exists() はカスタム関数を決定できません Function test () {return true;} if (function_exists ('test')) {echo "テストは関数です";
から 2024-04-29 11:01:01
0
3
2207
Google Chromeのモバイル版を表示する方法 こんにちは、先生、Google Chrome をモバイル版に変更するにはどうすればよいですか?
から 2024-04-23 00:22:19
0
11
2359
子ウィンドウは親ウィンドウを操作しますが、出力は応答しません。 最初の 2 つの文は実行可能ですが、最後の文は実装できません。
から 2024-04-19 15:37:47
0
1
1973
親ウィンドウには出力がありません document.onclick = function(){ window.opener.document.write('私は子ウィンドウの出力です');
から 2024-04-18 23:52:34
0
1
1858
CSS マインド マッピングに関するコースウェアはどこにありますか? コースウェア
から 2024-04-16 10:10:18
0
0
1923
関連トピック
詳細>
人気のおすすめ
人気のチュートリアル
詳細>
関連するチュートリアル
人気のおすすめ
最新のコース
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート