クリックカウンター
このサンプルでは、ViewModel を作成し HTML マークアップへ様々なバインディングを適用することで、 ViewModel の状態が反映され、編集される様子を確認できます。
Knockout は依存をトラッキングします。内部的に、hasClickedTooManyTimes
は
numberOfClicks
の変更通知を購読しており、numberOfClicks
が変更される度に hasClickedTooManyTimes
は再評価されます。
同様に、UI の複数の箇所でも hasClickedTooManyTimes
を参照し、変更通知を購読した状態になっています。
したがって hasClickedTooManyTimes
が変化する度に、該当する UI が更新されます。
変更通知の購読をプログラムする必要はありません。 フレームワークにより必要に応じて生成・破棄されます。 HTML コードを見ると、いかにシンプルであるかがわかります。
デモ
クリック回数 回
クリックしすぎです!指がすり減らないうちにやめて下さい ヽ(^o^;)丿
コード: View
<div>クリック回数 <span data-bind='text: numberOfClicks'> </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());
jsFiddle で試す /
原文はこちら