Knockout、Observableとcomputtedを理解します.

KOは何ですか
KOは万能ではありません.主に次の問題を便利に解決するために現れます.

UI要素が多く、ユーザーのインタラクションが頻繁で、大量のマニュアルコードを作成してUI要素の状態、スタイルなどの属性を維持する必要がありますか?

UI要素の間の関係は比較的緊密であり、例えば、1つの要素を操作する場合、他の要素の状態を変更する必要がありますか?

DOM要素とJsオブジェクトの間のデータ同期?

フロントエンドjavascriptコードの組織は理想的ではありませんか?ユーザがデータチェック、DOM操作、バックグラウンドインタラクションを入力します.

基礎概念一:view Model

は、UIイベントの応答を担当し、ユーザの操作に応答する.

は、例えば、Studentモデルが、UI要素とModelとの間でデータを同期させる(ユーザがinput-->koを修正してmodelを修正する)

などの領域モデルを保存する責任がある.

必要な時に、Helper方法を使って簡単にview ModelからServerに渡すべきデータを分離して、ajax方式でバックグラウンドと対話することができます.

は、Server端末から送信されたデータ(Ajax要求かもしれない)を受信し、モデルデータを更新し、UIプレゼンテーションを更新する責任を負う.

基礎概念2:Observableとcomputed
KOのすべてのアプリケーションシーンを見ると、基本的にこの2つの属性は少なくとも1つを使用します.これはKOの一番よく使うものだと思います.彼らの使い方は以下の通りです.

Observable(監視属性):自身の属性の変化を監視し、外部に通知を送信する.外部はsubscribe法によって属性の変化イベントを購読する.

Computed(依存性):初期バージョンではdependent Observableと呼ばれ、通常は他のObservableに依存し、計算によって自分のデータを得る.依存項が変更されると、computted属性は通知を受け、自身

を同時に更新する.
*ここで2時を言います

本明細書では「属性」と呼ばれていますが、本質的には彼らはjsのfunctionオブジェクトですので、訪問する時は()番号

を追加する必要があります.

のデフォルトでは、Computedの同期は任意のObservableの変化の時に発生しますが、場合によっては、ユーザーが入力しているときなど、このように頻繁に更新してほしくない場合があります.KOは他の方法で更新を遅らせることができます.このシリーズの後に専門的な文章が紹介されます.

この章のポイントは、この2つの基本的な属性の使い方を説明し、後の「実例解説」で詳しく説明します.
KOバインディングを有効にするにはどうすればいいですか?
KOにおいて、バインディングはアクティブ化される必要があり、HtmlドキュメントのDOM要素とview Modelのデータを分析し、関連付けすると理解できる.
通常は、ページ要素、view Modelデータの読み込みが完了したら、バインディングをアクティブにすることができます.もちろんいつでも結合したい時にアクティブにしてもいいです.
次のコードだけが必要です.

 var model = new AppViewModel();//     viewModel
 ko.applyBindings(model); //       

このようにKOは全体のBodyの中でバインディングする必要がある要素を探して、view Modelとバインディングします.もちろん、バインディングのルートノードを指定することもできます.

は、KO検索バインディングの範囲を縮小することができます(つまり、全ページでbindingを行う必要があります).

複数のview Modelを同時に使用して、それぞれ異なるエリアのバインディングを担当してもいいです.haha…

簡単です.パラメータを追加すればいいです.

var model = new AppViewModel();
ko.applyBindings(model, document.getElementById("Demo1")); //Demo1     Div

実例解説:Observable
基本文法
1、定義

var myViewModel = {
    personName: ko.observable('Bob'),//    personName     
    personAge: ko.observable(123)//    personAge     
};

2、読みだし

var a=myViewModel.personName();//a 'Bob'

3、書き込み、連続書込み(チェーンコール)

myViewModel.personName('Mary').personAge(50);//     2    

4、属性変更イベントの購読

myViewModel.personName.subscribe(function(newValue) {
    alert("The person's new name is " + newValue);
});

myViewModel.personName('    ');//      alert