Nockoutjsへの初心者ガイド：パート2

キーテイクアウト

• knockoutjsは、UI要素をデータモデルに接続するプロセスを簡素化するさまざまな内蔵バインディングを提供し、動的で応答性の高いUIを簡単に作成できます。
knockoutjsのテキストと値のバインディングは、HTML要素の簡単な双方向データバインディングを促進し、データモデルが変更されたときにUIを自動的に更新し、その逆の場合はUIを自動的に更新します。
• knockoutjsには、「click」や「submit」などのイベントバインディングが含まれています。これにより、開発者は手動イベント処理を必要とせずにUI要素に動作を追加し、開発プロセスを合理化できます。
ライブラリは、「可視」、「enable」、「css」などの条件付きおよびスタイルのバインディングをサポートしているため、開発者はデータモデルの状態に基づいて要素の可視性とスタイリングを動的に制御できます。 ドロップダウンリストの「オプション」バインディングやチェックボックスの「チェック済み」バインディングなどの高度な機能とラジオボタンは、UI内のより複雑なフォーム要素を処理するための堅牢なツールを提供します。
ノックアウトの初心者ガイド：バインディング
ノックアウトは、最も一般的なタスクとシナリオに便利な組み込みバインディングのセット全体を提供します。これらのバインディングのそれぞれを使用すると、単純なデータ値をバインドするか、JavaScript式を使用して適切な値を計算できます。これにより、多くの柔軟性が提供され、最小限の労力で非常にダイナミックなUIを簡単に作成できます。
• ビルトインバインディングを使用するための構文は、HTML要素のデータバインド属性の内部にノックアウトバインディング名とビューモデルプロパティのペアを含めることです。

HTML要素の複数のプロパティにデータバインドする場合は、この構文を使用してバインディングをコンマで分離するだけです。

バインディングのほとんどがパラメーターをブール値に変換しようとすることに留意する必要があります。実際にはブール値ではない値を与えると、それは真実またはfalsyとしてゆるく解釈されます。これは、ゼロ以外の数字と非ヌルオブジェクトと非空白の文字列がすべて真であると解釈されるのに対し、ゼロ、ヌル、未定義、および空の文字列は偽と解釈されることを意味します。

あるタイプのデータバインディングを使用する方法を理解している場合、他のタイプのデータバインディングは非常に簡単に学ぶ必要があります。次に、説明と短い例を提供することで、それぞれを説明します。

単純なバインディング

// syntax: data-bind="bindingName: bindingProperty"
<span data-bind="text: msg"></span>

前のチュートリアルで観測可能性を扱う際に、すでにテキストの拘束力があることがわかりました。関連する要素のテキストをパラメーターの値に設定します。これは、DOM要素のInnerText（IE）またはTextContent（その他のブラウザ用）プロパティを設定することに相当します。パラメーターが数字または文字列以外のものである場合、バインディングはtoString（）の結果を要素に割り当てます。

このパラメーターが観測可能な値である場合、バインディングは値が変更されるたびに要素のテキストを更新します。パラメーターが観察できない場合、要素のテキストを1回だけ設定し、後で再度更新しません。これは、すべてのバインディングに有効です。

テキストバインディングは、スパンまたはdiv要素の値を表示するためによく使用されます。使用すると、以前のテキストが上書きされます。

// syntax: data-bind="bindingName: bindingProperty"
<span data-bind="text: msg"></span>

値バインディングは、関連する要素の値をパラメーターの値に設定します。これは通常、入力、Select、Textareaなどのフォーム要素に使用されます。ユーザーが関連するフォームコントロールで値を編集すると、ビューモデルの値を更新します。同様に、ビューモデルの値を更新すると、画面上のフォームコントロールの値が更新されます。これは双方向結合として知られています。パラメーターが数字または文字列以外のものである場合、バインディングはtoString（）の結果を要素に割り当てます。

デフォルトでは、ノックアウトは、ユーザーが変更イベントで別のDOMノードに焦点を合わせたときにビューモデルを更新しますが、以下のValueUpDateパラメーターを使用して値を更新すると制御できます。バインディングにもValueUpDateというパラメーターが含まれている場合、これは変更を検出するために使用するブラウザイベントノックアウトを定義します。

「変更」はデフォルトのイベントであり、ユーザーが異なるコントロールに焦点を移動するとき、または変更後すぐに要素の場合にビューモデルを更新します。

「AfterKeyDown」 - ユーザーが文字の入力を開始するとすぐに、ビューモデルを更新します。これは、ブラウザのキーダウンイベントをキャッチし、イベントを非同期に処理することで機能します。 「AfterKeyDown」を使用してリアルタイムでビューモデルを更新したい場合は、最良の選択です。

"keyup" - ユーザーがキーをリリースしたときにビューモデルを更新

"keypress" - ユーザーがキーを入力したときにビューモデルを更新します。これは、ユーザーがキーを下げた場合に繰り返し更新されます

コントロールマークアップ

<span data-bind="text: msg, visible: toggle"></span>

HTMLバインディングは頻繁に使用されませんが、ビューモデルでHTMLコンテンツをレンダリングするのに非常に便利です。このバインディングは、関連する要素のHTMLをパラメーターの値に設定し、innerHTMLプロパティをDOM要素に設定するのと同等です。パラメーターが数字または文字列以外のものである場合、バインディングはtoString（）の結果を要素に割り当てます。

このバインディングは、innerHTMLを使用して要素のコンテンツを設定するため、信頼できないモデル値で使用しないように注意する必要があります。コンテンツが安全に表示できることを保証できない場合は、代わりにテキストバインディングを使用できます。

// syntax: data-bind="bindingName: bindingProperty"
<span data-bind="text: msg"></span>

ノックアウトには多くの組み込みのバインディングがありますが、何も存在しない状況に遭遇します。それらのために、ノックアウトはattrバインディングを提供します。これにより、任意の属性をビューモデルプロパティにデータバインドできます。パラメーターは、プロパティ名が属性であり、プロパティ値が属性に拘束される値であるJavaScriptオブジェクトである必要があります。これは、A要素またはIMG要素のSRCおよびALTのHREFとタイトルを結合するなど、多くの一般的なシナリオで非常に便利です。

<span data-bind="text: msg, visible: toggle"></span>

スタイリングを追加

CSSと組み込みのバインディングを使用してノックアウトでスタイルをバインドできます。

CSSバインディングは、関連する要素の1つ以上のCSSクラスを設定します。パラメーターは、プロパティ名が目的のCSSクラスに対応し、プロパティ値がクラスを適用すべきかどうかを示すtrueまたはfalsに評価するJavaScriptオブジェクトである必要があります。複数のCSSクラスを一度に設定できます

式を使用して、クラスがいつ適用されるかを判断できます。

<p>The tip of the day is: <span data-bind="text: tipOfTheDay"></span></p> 

function viewModel() {
 var self = this;
 self.tipOfTheDay = ko.observable('Relax.Take it easy!')
};
ko.applyBindings(new viewModel());

可能な限りCSSクラスを使用する方が良いですが、特定のスタイルを設定することもできます。ノックアウトは、関連する要素に1つ以上のスタイル値を設定するスタイル組み込みのバインディングでこれをサポートします。パラメーターは、プロパティがCSSスタイル名に対応するオブジェクトであり、値は適用するスタイル値に対応する必要があります。通常、このパラメーター値はJSONを使用して宣言されます

<input data-bind="value: name, valueUpdate: 'afterkeydown'"></input>
<p data-bind="text: name"></p>

function viewModel() {
 var self = this;
 self.name = ko.observable()
};
ko.applyBindings(new viewModel());

注：属性またはCSSクラスがあり、名前が合法的なJavaScript変数名ではない場合は、識別子名を引用符で巻き付けて、文字列の文字通りになるようにする必要があります。また、名前が法的JavaScript識別子ではないスタイルを適用したい場合は、そのスタイルにJavaScript名を使用する必要があります。

イベントの取り扱い

<div data-bind="html: markup"></div>

function viewModel() {
 var self = this;
 self.markup = ko.observable('<p><strong>Knockout</strong> is so <em>cool</em>!</p>')
};
ko.applyBindings(new viewModel());

ノックアウトは、イベントが組み込まれたバインディングを通じて、あらゆるイベントへのバインディングをサポートします。指定されたイベントのイベントハンドラーを、関連するDOM要素に追加します。これを使用して、定義されたHTMLイベントにバインドできます。イベントハンドラー内で、現在のビューモデルデータ項目、イベントオブジェクト、またはイベントバインディングの一部として渡されるカスタムパラメーターにアクセスできます。イベントバインディングを使用するには、イベント名とビューモデルメソッドのオブジェクトリテラルを含む名前の値ペアを渡します。

クリックバインディングは、クリックイベントを処理しています。それはイベントのために最もよく使用されているバインディングであるため、それは単にイベントのバインディングの近道です。

// syntax: data-bind="bindingName: bindingProperty"
<span data-bind="text: msg"></span>

送信バインディングは、フォーム要素の送信イベントを処理するためのショートカットです。フォームの送信バインディングを使用すると、ノックアウトはそのフォームのブラウザのデフォルトの送信アクションを防ぎます。言い換えれば、ブラウザはハンドラー関数を呼び出しますが、サーバーにフォームを送信しません。これは、送信バインディングを使用する場合、通常のHTMLフォームとしてではなく、ビューモデルへのインターフェイスとしてフォームを使用しているためです。フォームに通常のHTMLフォームのように送信させたい場合は、送信ハンドラーからtrueを返してください。

フォームで送信を使用する代わりに、[送信]ボタンをクリックすることができます。しかし、送信バインディングを使用すると、テキストボックスに入力するときにEnterキーを押すなど、フォームを送信するための代替方法を使用することの利点があります。

ui

の制御

可視結合は、結合パラメーター値に基づいて関連する要素の可視性を設定します。バインディングは、任意のパラメーターをブール値に変換しようとします。ノックアウトの目に見えるバインディングは、TrueまたはFalseに評価されるプロパティにバインドする必要があります。これは、CSSを使用して定義したディスプレイスタイルよりも優先されます。

バインディングバインディングの有効化/無効化は、供給された値に基づいて、関連する要素に無効な属性を設定します。これは通常、入力、Select、Textareaなどのフォーム要素に使用されます。ノックアウトは、入力要素を有効にして無効にする組み込みのバインディングを提供します。有効なバインディングは、入力要素が拘束されている場合、入力要素がTrueに評価されることを有効にし、falseと評価する場合、要素を無効にします。バインディングは、正反対の

を実行します

<span data-bind="text: msg, visible: toggle"></span>

ノックアウトには、Hasfocusという名前の組み込みバインディングがあり、どの要素に焦点が施されているかを決定および設定します。 Hasfocusバインディングは、訪問者がページを開くときにフォームの特定の要素にフォーカスを設定する必要がある場合に便利です。

チェックボックスとラジオボタンを扱う

<p>The tip of the day is: <span data-bind="text: tipOfTheDay"></span></p> 

function viewModel() {
 var self = this;
 self.tipOfTheDay = ko.observable('Relax.Take it easy!')
};
ko.applyBindings(new viewModel());

チェックボックスは、ノックアウトのチェックバインディングに結合したデータにすることができます。チェックされたバインディングは、trueまたはfalsに評価するプロパティまたは式にバインドする必要があります。ビューモデルのプロパティは観測可能性として定義されるため、ソースプロパティが変更されるとチェックボックスが更新されます。同様に、ユーザーがチェックボックスをチェックまたはアンチェックすると、View Modelプロパティで値が更新されます。このバインディングは、ラジオボタンとチェックボックスのチェック状態を設定します。チェックボックスの場合、バインディングは任意のパラメーターをブール値に変換しようとします。ラジオボタンの場合、バインディングはボタン値の属性をバインディングパラメーターと比較します。

// syntax: data-bind="bindingName: bindingProperty"
<span data-bind="text: msg"></span>

ドロップダウンリストの作成

ドロップダウンリストには、アイテムのリストをロードし、値を表示し、別のキー値を使用し、ユーザーの選択を保存するためのいくつかの重要なプロパティがあります。ノックアウトは、これらのそれぞれに組み込みのバインディングを提供します。オプションバインディングは、ドロップダウンリスト要素に表示されるオプションを設定します。値は配列でなければなりません。この結合は、要素以外のものでは使用できません。マルチセレクトリストの場合、選択されたオプションのどれを設定するか、選択したオプションを読み取るには、選択したオプションバインディングを使用します。単一選択リストの場合、値バインディングを使用して選択したオプションを読み書きすることもできます。

オプションバインディングは、通常はビューモデルの配列プロパティから表示する値のリストを識別します。

選択されたバインディングバインディングは、現在選択されているマルチセレクトリストの要素を制御します。ユーザーがマルチセレクトリストのアイテムを選択または解除すると、これにより、ビューモデルの配列に対応する値が追加または削除されます。

<span data-bind="text: msg, visible: toggle"></span>

ドロップダウンリストに1つの値を表示する場合がありますが、ユーザーがリストからアイテムを選択したときに別の値を使用します。ノックアウトの組み込みオプションとオプションとオプションのバリューバインディングが役立ちます。 OptionStextバインディングは、オプションバインディングからドロップダウンリストに表示されるプロパティの文字列名に設定されます。 OptionsValueバインディングは、プロパティの文字列名に設定され、ドロップダウンリストのアイテムの選択された値にバインドされます。 OptionScaptionは、デフォルトで選択されたプリティカルオプションを選択したくない場合に役立ちます。このパラメーターは、オプションリストの上に「アイテムを選択する」などのテキストを設定し、特定のアイテムが選択されていない場合に表示します。

<p>The tip of the day is: <span data-bind="text: tipOfTheDay"></span></p> 

function viewModel() {
 var self = this;
 self.tipOfTheDay = ko.observable('Relax.Take it easy!')
};
ko.applyBindings(new viewModel());

そして、それがすべてこの部分であり、来週のフィナーレにご期待ください！

knockoutjs

<input data-bind="value: name, valueUpdate: 'afterkeydown'"></input>
<p data-bind="text: name"></p>

function viewModel() {
 var self = this;
 self.name = ko.observable()
};
ko.applyBindings(new viewModel());

に関するよくある質問

knockoutjsと他のjavascriptライブラリの違いは何ですか？

knockoutjsは、開発者がクリーンな基礎データモデルを使用してリッチでレスポンシブディスプレイとエディターのユーザーインターフェイスを作成するのに役立つJavaScriptライブラリです。他のJavaScriptライブラリとは異なり、KnockOoutJSはモデルとビューが分離されているモデル視野視界（MVVM）設計パターンを使用して、複雑なデータ駆動型インターフェイスを簡単に管理できるようにします。また、データモデルが変更されたときに自動UI更新を提供し、UIの部分をデータモデルに接続するための宣言的なバインディングを提供します。 UIの部分をデータモデルに接続するための宣言的バインディング。これは、理解して維持しやすい方法で、データをHTML要素に簡単にバインドできることを意味します。データモデルが変更されると、knockoutjsはUIの関連部分を自動的に更新し、手動DOM操作の必要性を排除します。

knokoutjsは他のjavascriptライブラリで動作できますか？

はい、knockoutjsは他のJavaScriptライブラリと一緒に動作できます。テクノロジースタックの残りの部分について仮定を立てないため、jQuery、ブートストラップ、さらにはAngularjsなどの他のライブラリやフレームワークと統合できます。 >

knockoutjsは、関連するDOM要素に1つ以上の名前のCSSクラスを追加または削除できる「CSS」バインディングを提供します。このバインディングは、データ条件に基づいてCSSクラスを要素に条件付きに適用する場合に特に役立ちます。変更について、依存関係を自動的に検出します。この機能は、データモデルが変更されるたびにライブラリがUIの適切な部分を自動的に更新できるため、knockoutjsの基本です。 nockoutjsは、サーバー側のテクノロジーで使用できます。使用するサーバー側の言語には不可欠なので、PHP、.NET、Java、Ruby、Python、またはその他のサーバー側の言語で使用できます。 JSONデータをクライアントに送信してから、KnockoutJSを使用してこのデータをHTMLにバインドする必要があります。検証メカニズム。ただし、jqueryの検証やノックアウト検証などの他の検証ライブラリと簡単に統合できます。これは、ノックアウトJSのフォーム検証用に特別に設計された個別のプラグインです。 🎜> knockoutjsは主にWeb開発用に設計されていますが、モバイルアプリ開発では、PhoneGapやCordovaなどの他のテクノロジーと組み合わせて使用​​することもできます。 HTML、CSS、およびJavaScriptを使用したネイティブアプリ。また、「イベント」、「送信」、「有効」、「無効」、「ハスフォーカス」など、他のイベントバインディングも提供します。これらのバインディングにより、ユーザーのインタラクションは宣言的な方法で簡単に処理できます。 MVVMの設計パターンにより、複雑なデータ駆動型インターフェイスを簡単に管理でき、観測可能性とバインディングのシステムは、大規模なアプリケーションであっても、コードを整理して保守しやすいものにします。

以上がNockoutjsへの初心者ガイド：パート2の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。