クリックカウンター

このサンプルでは、ViewModel を作成し HTML マークアップへ様々なバインディングを適用することで、 ViewModel の状態が反映され、編集される様子を確認できます。

Knockout は依存をトラッキングします。内部的に、hasClickedTooManyTimes は numberOfClicks の変更通知を購読しており、numberOfClicks が変更される度に hasClickedTooManyTimes は再評価されます。 同様に、UI の複数の箇所でも hasClickedTooManyTimes を参照し、変更通知を購読した状態になっています。 したがって hasClickedTooManyTimes が変化する度に、該当する UI が更新されます。

変更通知の購読をプログラムする必要はありません。 フレームワークにより必要に応じて生成・破棄されます。 HTML コードを見ると、いかにシンプルであるかがわかります。

デモ

コード: View

<div>クリック回数 <span data-bind='text: numberOfClicks'>&nbsp;</span> 回</div>
 
<button data-bind='click: registerClick, disable: hasClickedTooManyTimes'>クリックしてね</button>
 
<div data-bind='visible: hasClickedTooManyTimes'>
	クリックしすぎです！指がすり減らないうちにやめて下さい ヽ(^o^;)丿
	<button data-bind='click: resetClicks'>リセット</button>
</div>

コード: ViewModel

var ClickCounterViewModel = function() {
	this.numberOfClicks = ko.observable(0);

	this.registerClick = function() {
		this.numberOfClicks(this.numberOfClicks() + 1);
	};

	this.resetClicks = function() {
		this.numberOfClicks(0);
	};

	this.hasClickedTooManyTimes = ko.computed(function() {
		return this.numberOfClicks() >= 5;
	}, this);
};

ko.applyBindings(new ClickCounterViewModel());