KnockoutJSの学習とアプリケーション
KnockoutJSの最初の理解
KnockoutJsは、Web開発（モデル、ビュー、ビューモデル）のためのMVVMフレームワークです。
余談：
MvvmはModel-View-ViewModelの略です。それはモデルビュービューモデルです。
[モデル]は、バックエンドによって送信されるデータを指します。
[表示]は、表示されているページを指します。
[ビューモデル]はmvvmモードのコアであり、ビューとモデルを接続するブリッジです。これには2つの方向があります。1つは[モデル]を[ビュー]に変換することです。つまり、バックエンドによって送信されたデータを表示されたページに変換します。これを実現する方法は、データバインディングです。2つ目は、[ビュー]を[モデル]に変換することです。つまり、表示されるページをバックエンドデータに変換します。これを達成する方法は次のとおりです。DOMイベントの監視。これらの2つの方向が実現されます。これを双方向データバインディングと呼びます。
概要：ビューとモデルは、MVVMのフレームワークでは直接通信できません。ViewModelを介して通信します。ViewModelは通常、オブザーバーを実装します。データが変更されると、ViewModelはデータのこの変更を監視し、対応するビューに自動的に更新するよう通知できます。ユーザーがビューを操作すると、ViewModelもリッスンできますビューが変更され、データを変更するよう通知すると、実際にはデータの双方向バインディングが実現します。また、MVVMのViewとViewModelは相互に通信できます。MVVMのフローチャートは次のとおりです。
KnockoutJSの利点：
- ビジネスロジックコードとページ表示コードが分離されているため、フロントエンドプロジェクトが改善され、保守しやすくなっています。
- フォームデータをより便利にカプセル化、エコー、検証できます
- 純粋なJavasriptライブラリを使用し、任意のフレームワークと統合できます。jQueryライブラリの代わりにはなりません。
- KnockoutJSライブラリは、複雑なデータ駆動型インターフェースを処理するシンプルで直接的な方法を提供します
KnockoutJS特性：
- 宣言的バインディング：非常に単純な構文を使用して、データバインディング属性を介してHTML DOM要素をモデルに接続し、応答性の実装を非常に簡単にします。
- UIの自動更新：ビューモデルデータへの変更は、すぐに自動的にUIに反映されます。逆の場合も、追加のコード処理は必要ありません。
- 依存関係の追跡： KO属性とKOライブラリメソッド/属性の関係は透過的です。KOのデータ属性の変更を自動的に追跡し、関連する影響を受ける領域を更新します
- テンプレート：テンプレートは、複雑なUI構造を作成するためのシンプルで便利な方法であり、ネストされた領域が繰り返されます（モデルデータの表示に似ています）。
- スケーラビリティ：カスタム動作の拡張が非常に簡単
KnockoutJS構文
簡単な例
<script src="/js/knockout-3.4.2.js"></script> 核心
<script src="/js/knockout.validation.min.js"></script> 校验
<input data-bind="value: userName,valueUpdate: 'change'"/>
var viewModel = { userName: ko.observable("") };//声明
ko.applyBindings(viewModel);//在KnockoutJS中激活这个属性
データバインドの紹介
"value:username"
"valueUpdate: 'change'"カスタムイベントを表すためにusernameという名前のフィールドをバインドすることを
指します。valueUpdateパラメータが使用されている場合、KOはデフォルトイベントの代わりにカスタムイベントを使用します。
ko.applyBindings（）の紹介
ko.applyBindings(obj,[node])2つのパラメーターを受け取ります。最初のパラメーターは作成されたオブジェクトで、2番目のパラメーターはバインドされるHTML要素またはコンテナーを設定します。同じコンテナー内で実行できるアクティブ化は1つだけです
ko.observable（）の紹介
<input data-bind="value: personName">
var myViewModel = {personName: ko.observable()};
入力の値が変更されると、値はpersonNameに同時に割り当てられ、myViewModel.personName（）を介してmyViewModelオブジェクトで表示できます。
koによってバインドできます：
- テキストと外観を制御する
- 制御フロー
- フォームフィールドを使用する
- レンダリングテンプレート
公式アドレス：http://knockoutjs.com/
中国語APIドキュメント：http://www.aizhengli.com/knockoutjs/knockoutjs.html
著作権声明：記事のコンテンツはインターネット上で要約されています。元の作者の権利が侵害されている場合は、私に連絡してください課題を削除または承認する