Knockout.jsのMVVMとobservableの項を意訳

Knockout.jsでのMVVM(Model-View-View Model)パターンとobservableについて。

ちなみに理解できているかは微妙です。自分の備忘録としての記事であって、情報の正確性を保証するものではないので、正確に把握されたい方は原文を読まれる事をお勧め致します。

気が向いたらレイアウトの整形とか読みやすさに手を加えようと思います。

原文はココ。

Model:

アプリケーションのデータを格納するもの（オブジェクト）。代表的なところで言えば銀行のアカウントのようなデータで、どのUIにも依存しない。

View Model:

UI上のデータや操作のコアとなるもの。例えば、リストエディターを実装した場合、ビューモデルはアイテムが入っているリストと、アイテムを追加／削除できるメソッドを持っている。

View:

ビューモデルの状態を表示するもの。ビューモデルからの情報を表示し、ビューモデルへコマンドを送る（クリックなど）。ビューモデルの状態が変更されたら更新する。

ビューモデルってのは以下みたいなものです。

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

超シンプルなビューを上記のビューモデルを使って表示してみます。

The name is <span data-bind="text: personName"></span>

ただこのままだとHTMLはdata-bindという属性を理解できないので、Knockoutをアクティベートします。記述先はHTMLの</body>の一行上か、jQueryでいう$(function(){})。要はDOM-readyになったら呼び出されるように。

<script src="knockout.js">
    ko.applyBindings(myViewModel);
</script>

これで、表示されます。

The name is Bob

ko.applyBindingsについて。

• 第一引数は、使いたいビューモデル（オブジェクト）。
• 第二引数は、適用したいdata-bind属性を宣言した場所。例えば、

  
  ko.applyBindings(myViewModel, document.getElementById('someElementId'));
  
  

  は、someElementIDというDOMエレメントに限定した適用が出来る。
  これは複数のビューモデルを持ち、ページの異なる領域にそれぞれ結び付けたい時に役立つ。

例えば、ビューモデルをこんな感じに変更します。

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

これだけで、ビューを変更する必要は全くありません。この変更を検知して勝手にビューは更新してくれます。

全てのブラウザがJavascriptのgetterとsetterをサポートしているわけではないので（ゲフンッIEゲフンッ）、互換性のため、ko.observableオブジェクトは実際には関数です。

• observableの現在の値を読むには、パラメータをつけずただobservableを呼びます。
  例えば、myViewModel.personName()と呼べば‘Bob‘が、myViewModel.personAge()なら123が返ってきます。
• obervableへ新しい値を書き込むには、observableを呼び、新しい値を記述します。
  例えば、myViewModel.personName(‘Mary‘)で名前が‘Mary‘に書き変わります。
• 複数のobservableプロパティへ書き込むには、myViewModel.personName(‘Mary‘).personAge(50)で名前に‘Mary‘が、ageに50が代入されます。

重要はポイントは、obsrevablesはそれらを観察できるということです。つまり、他のコードは「変更の通知を受けたい」と言う事ができます。（ほぼ直訳）
なので、data-bind="text: personName"と書いた時、personNameが変更されたら、text自身に通知されます。

nameの値をmyViewModel.personName(‘Mary‘)を呼び、‘Mary‘に変更したら、textは自動的にそれに結びついたDOMエレメントの内容（ここでは表示文字）を更新します。
このようにしてビューモデル野変更は、自動的にビューへ伝播します。

observablesを明示的に予約（ちょっと上級編）

通常なら用意されているものを手動でセットアップする必要はありませんので、ビギナーな方々は飛ばして下さい。

もしobservablesの変更通知を自分自身で作ったサブスクリプションで受け取りたい場合、subscribe関数を呼びます。例えば、

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

こんな具合に呼び出して下さい。サブスクリプションを削除することも可能です。変数として参照を保持し、dispose関数を呼びます。

var subscription = MyViewModel.personName.subscribe(function(newValue){/*なんかやる*/});
// なんやかんやあって
subscription.dispose(); // もう通知を受けたくない

用意されているもので十分にサブスクリプション管理はケアされているので、ほとんどの場合、使う必要はないです。