Knockoutの基本コンセプト

以下の内容は、Knockout（KO）のドキュメントページをベースに一部自分なりの解釈を加えています。オフィシャルなドキュメントはこちらを参照してください。

Knockout（KO）はJavaScriptでMVVMパターンを実現するためのライブラリです。MVVMはWPFやSilverlightにおいて多く利用されている開発パターンで、超ざっくりですが（汗）、UIとロジックを分離することで、アプリケーションの保守性や再利用性を向上させ、（議論はありますが）各機能の単体テストを容易にする開発パターンです。

KOにおけるMVVM

Model（モデル）
アプリケーションが使用するデータソース。UIには依存しないオブジェクトもしくはある一連の操作（トランザクション）。

KOではAjaxコールによりサーバ側のコードにてModelの読み書きを行うのが一般的な手法。

View Model（ビューモデル）
ある（一連の）機能を実現するために必要なデータソースおよび処理を提供するオブジェクト。

例えばユーザ名簿を編集する機能のためのView Modelは、ユーザ名簿（データソース）と、ユーザ名簿の追加（機能1）、ユーザ名簿の削除（機能2）、ユーザ名簿の更新（機能3)を提供する。View Modelはコードのみで実装されたオブジェクトでありそのデータソースあるいは機能はどのようなUIによって利用されるかについては関知しない。例えば前述の例であれば、ユーザ名簿の追加機能がどのようなトリガーによって実行されるか（追加ボタンをクリック、ユーザ名入力後のEnterキー押下時等）は実装の際に意識しない。このためUIデザイン（View）が変更になってもロジック（View Model）は変更する必要がない。

KOではView ModelはJavaScriptによって実装されたオブジェクトであり、htmlの構造には一切関与しない。

View（ビュー）
アプリケーションのUI（デザイン）であり、View Modelが提供するデータソースと機能を表示する。ボタンのクリックによりView Modelの機能を実行したり、View Modelの状態が変化すると自身の表示を更新する。

KOではViewは単純にUIを定義したhtmlとなる。

実装の流れ

View Model の作成例

var myViewModel = {
    personName: 'Bob',
    personAge: 123
};

ViewからViewモデルを利用
data-bind属性により利用するビューモデルのプロパティを指定（バインド）します。

名前は <span data-bind="text: personName"></span>です。

Knockoutの有効化
上記例の"data-bind"属性は標準のhtmlでは定義されていないため、正常にバインドを動作せるには以下のスクリプトを実行しKnockoutの有効化を有効化させる必要があります。

ko.applyBindings(myViewModel);

ここで注意が必要なのは、DOM構築後でないとKnockoutを有効化できない点です。そのため上記のスクリプトをhtmlドキュメントの最下部で実行するか、jQueryの$(function) でラップするなどしてDOM構築後に有効化します。

$(function() {
	ko.applyBindings(myViewModel);
});

実際に使ってみた例は以下を参照してください。
knockoutをとりあえず使ってみる