この記事は、knockout.js Advent Calendar 2015の１日目の記事です。
knockout , knockout-es5 , knockout.punches環境を想定しています。
knockout.js は、MV*系のライブラリです。そのなかでもMVVM(Model View ViewModel)という分類になります。
knockoutは基本的にフレームワーク（特にフルスタックフレームワーク）では__ありません__。あくまでライブラリです。
その為、フレームワーク独特の文化・世界観にどっぷりつかる必要はなく、任意の他のライブラリとの連携が比較的楽なメリットがあります。
逆にデメリットとしては、MVVMの仕組み以外の機能（例えば、SPAなどで用いられるクライアントサイドのWebRoutingの仕組みなど）は提供されていません。 完全に路線（レール）を引いてほしい場合には、AureliaやAngular2などを利用するのがいいでしょう。
knockoutは2way-bindingの仕組みを提供しているので、
とあるModelの
とあるPropertyの変更を検知し、
その変更をもとに、
即座または任意の遅延後に、
他のプロパティを変化させたり、
Viewを更新したり出来ます。
実際のサンプルを見てみましょう。
knockout標準記法でのサンプル
あなたの名前は？:<input type="text" data-bind="value:myName">
<div>こんにちは！<span data-bind="text:myName"></span>さん</div>
<div>このページの滞在時間は、<span data-bind="text:age"></span>秒です</div>
var vm = {
myName: ko.observable("山田"),
age: ko.observable(1)
}
setInterval(function(){
vm.age( vm.age()+1 );
},1000);
ko.applyBindings(vm);
ko.applyBindings(vm)は、ViewとViewModelの紐づけです
この例では、
ユーザの名前 をView→ViewModelへbindingしていて、
滞在時間を ViewModel→Viewへbindingされているのが確認できます。
knockoutの構文拡張
ただ、ちょっと書き方が古臭い とか 面倒だ とか感じるあなたは現代っ子な感覚の持ち主でしょう（いい意味で）。
それもそのはずで、knocckoutは 悪名高き IE6にも対応するために、モダンな記法を標準では採用していません。
しかし、そんな古代のブラウザをサポートする必要がない、またはそもそもIEではなく、ChromeやFirefoxもしくはスマホなどのモダンブラウザのみにターゲットを絞れる場合には、どんどんモダンな記法を採用して行きたいです。
そこで、標準のknockoutを次の２つで拡張します。
-
knockout.punches
(knockoutの構文の構文糖衣（SyntaxSugar)を提供) -
knockout-es5
(ECMAScript5を使用したObjectのPropertyのGetter Seterをknockoutのobservaleとして利用する仕組みを提供)
先ほどのサンプルに、拡張した仕組みを適用すると このように すっきりします。
あなたの名前は？:<input type="text" data-bind="value:myName">
<div>こんにちは！{{myName}}さん</div>
<div>このページの滞在時間は、{{age}}秒です</div>
var vm = {
myName: "山田",
age: 1
};
setInterval(function(){
vm.age++
},1000);
ko.track(vm);
ko.punches.enableAll();
ko.applyBindings(vm);
新たに追加された２行について、
ko.punches.enableAll()は、
knockout.punchesで追加されるあらゆる構文糖衣を有効にし、
ko.track(vm)は、
knockout-es5により追加されるもので、vmのもつプロパティを監視対象に追加する（≒各プロパティをobservable()でマッピング）
といったものです。
（各ライブラリは、自前のサーバで提供するか、 CDNとして提供されているものを利用するようにしてください。 JsFiddleのサンプルで用いているような rawgithub.com への直リンでの本番運用は禁止されています。）