AngularはMVVMフレームワークでは優れていますが、このような大きくて包括的なフレームワークでは、学習するのは低くなく、開始には少なくとも1〜2週間かかります。 KnockoutJSはデータバインディングに焦点を当てており、わずか1日または2日で使用することができるため、学習コストが低すぎることはありません。フロントエンドの進化が非常に速い時代では、学習コストも考慮する必要がある要因です。多くの場合、私たちのプロジェクトはそれほど複雑ではなく、普遍的なフレームワークは必要ありません。シンプルで簡単なツールが必要です。
knockoutjsの前
注文システムを構築しており、製品の単価を表示する必要があり、入力数量に基づいて合計価格を計算して表示できるとします。また、ネイティブコードで簡単に達成できます。効果は次のとおりです。
コードは次のとおりです。
<！ - HTMLコード - >価格：<SPAN ID = "Price"> < /span> <br /> account：<input Type = "TEXT" ID = "Account" value = "" PlaceHolder = "PlaceHolder ="を入力してください。 document.getElementById（ 'アカウント'）、sumnode = document.getElementById（ 'sum'）、rish = 100、account = 11、sum = rice * account; // initialize。 pricenode.innertext = rice; AccountNode.Value = Account; sumnode.textContent = sum; //ビューレイヤーaccountnode.addeventlistener（ 'keydown'、function（e）{window.settimeout（function（）{）{account = councount = councound.value; sum = cound.textcontent; sum.textcontent; sum.textcontent; sum.textcontent; sum.textcontent（councound.value;まあ、それはとても簡単です！ちなみに、私たちは一度に50個のアイテムを表示します。10種類のディスプレイと、5箱の岡本を購入したり、揚げた生地のスティックを手に入れたりするなど、さまざまなプロモーションがあります...
だから、あなたはネイティブの実装の問題を知っています：
•UIとデータの相互作用の増加に伴い、コードの量は急速に増加し、維持が困難です
•DOMクエリ、ID、またはクラスに基づく名前を管理するのは困難です
•高いコードの結合、再利用が困難
Knockoutjsの紹介
Knockoutjs（以下、KOと呼ばれる）は、上記の問題を解決するように見えました。これは、データとビューの拘束力の実装に焦点を当てた軽量のMVVMライブラリです。 UIクラスやルーティング機能は提供されておらず、開始するのは非常に速いです。同時に、KOは数年前から外出してきたため、比較的成熟したフレームワークになりました。より動的に表示されるいくつかのページを実行する場合、KOは間違いなくより良い選択です。 MVVMについてはあまり言いません。混乱させる写真だけです。
KOは、3つのコア機能（公式Webサイトの紹介）に基づいています。
1.観測可能性と依存関係追跡：観測可能性を使用して、データ変換とバインディングのためにモデルデータ間の暗黙の関係チェーンを設定します。
2。宣言的なバインディング：シンプルで読みやすい構文を使用して、モデルデータをDOM要素に簡単にバインドします。
3。テンプレート：テンプレートエンジンが組み込まれ、モデルデータの複雑なUIプレゼンテーションをすばやく書き込みます。
KOの使用は非常に簡単です。公式Webサイト（http://knockoutjs.com/index.html）に直接ダウンロードして、<script>で紹介してください。
観察可能なオブジェクト
KO（私の子供時代の希望の1つであったカスタム価格）を使用して上記の例を書き直します。
コードは次のようになります：
<！ - html code-> <div id = "one"> rice：<input type = "text" data-bind = "value" placeholder = "preate" /> <br /> account = "account" value： "placeholder =" cone number " /> <br /> sum < /> spar < /> < /> < = function（p、a）{//観測可能なオブジェクトとして設定し、this.price = ko.observable（p）; this.account = ko.observable（a）; // ko関数を呼び出すと、ko.purecomputedの内部コードを実行するとき、これはkoとko.priceの報告を実行するときに渡されます。 this.sum = ko.purecomputed（function（）{//観測可能なオブジェクトはfunctionオブジェクトであるため、現在の値を読み取るためにrise（）を使用する必要があります。 10）; //この結合を適用すると、バインディングがko.applybindings（vm）を有効にし始めます。1）最初にHTMLコードを見てみましょう。
data-bind = "xx：oo"のようなキー価値ペアが各タグに追加されていることがわかります。これはKOの結合構文です。 xxooは何を表していますか？ （xxoo？著者はまだ子供です...）例から、XXの属性はタグであり、テキスト、値、クラス、チェック済みなどのタグ属性であることがわかります。 OOは変数のように見えますが、変数ではなく関数オブジェクトです。この関数を実行すると（A（））、対応する境界値を取得できます。 XXOOを介して、要素の属性またはイベントはJSの関数オブジェクトにバインドできます（XXOOの場合、お互いに責任を負う必要があります）、これはKOの宣言的拘束力です。結合の定義は実際にはオブザーバーモードですが、これは双方向の結合です。出版社とサブスクライバーは、互いのメッセージを購読します。これは、MVVMの双方向結合です。 KOの双方向の結合の結果は、一方の当事者が変更することで他方の当事者を自動的に更新できることです。つまり、データとプレゼンテーションのレイヤーはViewModelを通してしっかりと結合します。結合効果は次のとおりです。
2）JSコードを見てみましょう。
ViewModelオブジェクトはJSで定義されており、HTMLでバインドされたOOがオブジェクトで動作していることがわかります。ここには、Ko.observable（）とko.purecomputed（）の2つの主要な操作があります。
•ko.observable（p）：名前を参照してください。これは、観察可能なオブジェクトを設定する方法です。渡されたパラメーターPは初期化された値です。ここのパラメーターは、基本的なデータ型またはJSONオブジェクトです。観察可能に設定された後、システムが常にこの値を観察することを意味します。 ViewModelのPまたはバウンドオブジェクトの変更のPが更新イベントを引き起こし、この値を使用するすべての場所が最新の状態に更新されます。明らかに、観察可能なオブジェクトは比較的パフォーマンスが消費されるため、動的な変更（価格など）を必要としない値の場合、観察可能なオブジェクトとして設定しません。もちろん、集中初期化のためにviewmodelに入れられる必要があります。
•注：ko.observable（p）によって返される観測可能なオブジェクトは関数オブジェクトであるため、furic（）を使用して観測可能なオブジェクトを読み取る必要があります。同様に、観察可能なオブジェクトを設定するには、価格（NewValue）を使用するために価格（NewValue）が必要です。さらに思いやりがあるのは、設定するときにチェーンライティングをサポートすることです：viewmodel.price（100）.Account（10）。
•Ko.PureComputed（）は、いわゆる依存関係追跡です。これが単価です *数量は合計価格に等しい。これを直接使用できないことに注意してください。sum= this.price（） * this.account（）;合計を指定します。この書き込み方法は、バインドされたオブジェクトを動的に更新することはできませんが、合計変数を動的に変更しますが、バインドされたオブジェクトを更新するには他の操作が必要です。したがって、計算に関連するバインディング値は、KOの計算関数を使用して設定する必要があります。もちろん、返された関数オブジェクトも関数オブジェクトです。さらに、KOには計算された関数もありますが、これも設定できますが、パフォーマンスを改善するためにPureを使用することをお勧めします。
•こちらの執筆方法に注意してください：ko.purecomputed（fn、this）、つまり、fnをviewmodelスコープにバインドします。これは、実際にはJSでの呼び出し/適用です。これはKO内部関数を実行するときにKOオブジェクトであるため、ViewModelオブジェクトの範囲を取得するためには、上記の書き込み方法に渡す必要があります。もちろん、それを使用してko関数の外側のViewModelオブジェクトを保存し、KO関数内でそれを使用してViewModelオブジェクトを呼び出すこともできます。このような：
var that = this; this.sum = ko.purecomputed（function（）{return that.price（） * that.account（）;}）;ViewModelコンストラクターを定義した後、ViewModelオブジェクトがインスタンス化され、Ko.ApplyBindings（）メソッドが使用されてバインディングが有効になります。このステップをお見逃しなく。
KOを使用した単純なページモード：
<！ - html code-> <Span data-bind = "text：bindtext"> </span> // js codevar viewmodel = {bindtext：ko.observable（ 'initvalue'）}; ko.applybindings（viewmodel）;要約すると、data-bind = "xx：oo"を使用してHTMLでバインディングを宣言し、JSでビューモデルを作成し、観測可能なオブジェクトを設定し、最後にバインディングを適用します。
観察可能なオブジェクトアレイ
観察可能なオブジェクト配列の使用を見てみましょう。 KOでは、JSのように配列と変数を混合できません。配列オブジェクトの場合、ko.observablearray（[…、…]）を同じ方法で使用する必要があります。同様に、配列要素は、基本的なタイプまたはJSONオブジェクトのものです。 KOの観測可能なオブジェクトアレイには、Slice（）、sort（）、push（）などの一連の配列操作方法があります。効果は、ネイティブJSアレイ操作方法と同じです。 KOメソッドを介した変更の唯一の違いは、サブスクライバーに通知されてインターフェイスを更新しますが、JSメソッドはインターフェイスを更新しません。簡単な例を次に示します。
<！ - html code-> <select data-bind = "options：list"> </select> // js codevar vm = {// list：ko.observablearray（）list：ko.observablearray（['luffy'、 'zoro'、 'sanji']）}; ko.applybindings（vm）;キーポイント：KOは、要素自体の状態ではなく、配列の状態を監視します。つまり、配列状態が変更された場合（要素の追加）、KOイベントがトリガーされ、バインドされたオブジェクトが更新されますが、配列内の要素の変更（値の変更など）は監視されず、KOイベントをトリガーできません。例えば：
ネイティブの方法を使用してルフィーをコンソールでルーシーに動的に変更しても、UIページは更新されませんが、KOの配列を使用して配列を変更すると、すぐにページが更新されます。リフレッシュすると、以前の変更もリフレッシュされることに注意してください（Luffy> Lucy）。言い換えれば、JSメモリの変数は実際に変更されていますが、DOMを更新するためのアクションがまだ不足しています。ここで見ることができるように、配列を読み取る方法はvm.list（）[0]です。リストは関数オブジェクトでもあり、リターン値を実行することはリストコンテンツです。同様に、VM.List（["girl"、 "girl"]）を介して観測可能なオブジェクト配列をリセットし、すぐにUIを更新できます。
配列要素の変更をUIに動的に反応する必要がある場合は、配列要素を観測可能なオブジェクトに設定し、KOのメソッドを使用して配列要素値を変更する必要があります。 KOのメソッドリスト（）[0]（ "Lucy"）を使用することに注意してください！
観察可能なオブジェクト配列を操作するための方法には2つのタイプがあります。 1つは、ネイティブJSアレイメソッドと同じ名前です：ポップ、プッシュ、シフト、アンシフト、リバース、ソート、スプライス。この部分は、ネイティブJSメソッドの使用と効果と同じなので、二度と繰り返しません。
主に次のように、JSでは他のいくつかの方法は利用できません。
•（someitem）を削除 - すべての要素項目を等しい値でsomeitemに削除し、配列形式で返します。ここで意味するのは、最初の項目list.remove（0）を直接削除することはできませんが、form list.remove（list（）[0]）を使用して削除することです。要するに、合格したパラメーターは要素アイテムの値でなければなりません。 List（）[0]の形式で使用することも、値文字列（「Luffy」など）を直接入力できます。
•remove（function（item）{return item.age.age <18;}）-18未満の年齢属性を持つすべての要素アイテムを削除し、配列として返します。この使用法は、通常の配列の高次関数と違いはありません。アイテムは、高次関数のパラメーターとして渡されます。アレイを繰り返すと、高次関数の返品値が真の値である場合、アイテムは削除されます。そうしないと、次のアイテムに移動します。
•RemoveAll（['Chad'、132、未定義]） - 「Chad」または123に等しい値ですべての要素アイテムを削除して、アレイとして返します。
•RemoveAll（） - すべてのアイテムを削除し、アレイとして返品します。
ヒント：観察可能なオブジェクトを扱う場合、多くのオブジェクトと頻繁な相互作用がある場合、各変更ですぐにリフレッシュするとパフォーマンスが消費されます。現時点では、拡張機能myobservablearray.extend（{ratelimit：1000}）を使用して、遅延リフレッシュを設定できます。たとえば、観察可能な配列に要素を継続的に挿入する場合、1000msのサイクル時間を設定して、頻繁なDOM操作によって引き起こされるパフォーマンスの悪化を避けるために、1000ms以内のすべての操作を更新に集中させることができます。
要約します
この記事では、主にKnockoutjs：Observableオブジェクト（配列）で最も重要な概念を紹介します。観測可能なオブジェクトは、本質的に関数オブジェクトです。 KOメソッドを介して観測可能なオブジェクトを操作する場合、UIは動的に更新できます。これが推奨される方法です。同時に、ネイティブJSメソッドを介して観測可能なオブジェクトを操作することもできますが、ネイティブメソッドはUIディスプレイを更新せず、UIにリフレッシュするために次の更新イベントまで待つ必要があります。