Hello World デモ

2つのテキストボックスが ViewModel にある Observable プロパティーにバインドされています。 "フルネーム" の表示は Computed Observable プロパティにバインドされています。

どちらのテキストボックスを編集しても、"フルネーム" が更新されます。 HTML コードを見ると、"onchange" イベントをキャッチする必要がないことがわかります。 Knockout は UI の更新を検知します。

デモ

コード: View

<p>ファーストネーム: <input data-bind="value: firstName" /></p>
<p>ラストネーム: <input data-bind="value: lastName" /></p>
<h2>Hello, <span data-bind="text: fullName"> </span>!</h2>

コード: ViewModel

// ViewModel を定義します
var ViewModel = function(first, last) {
	this.firstName = ko.observable(first);
	this.lastName = ko.observable(last);
	 
	this.fullName = ko.computed(function() {
		// Knockout は依存を自動的にトラッキングします。
		// fullName の評価中に firstName と lastName を呼び出すため、
		// それぞれに依存していることが検知されます。
		return this.firstName() + " " + this.lastName();
	}, this);
};

// 次のコードで Knockout を起動します。
ko.applyBindings(new ViewModel("Planet", "Earth"));