最近、動きがなかった knockout.js ですが、昨日にバージョン 2.3.0 と 3.0.0 ベータが公開されました。
公式サイトのダウンロードページが分かりやすくなった気がします。作者である Steven Sanderson 氏のブログに新機能や更新内容がいろいろと紹介されていました。
Knockout v2.3.0 released; v3.0.0 beta available - Steve Sanderson’s blog - As seen on YouTube™
そしてリリースノートに 2.3.0 と 3.0.0 ベータ の詳細な更新内容が記載されているので確認しておきます。
Releases · knockout/knockout · GitHub
2.3.0 では名前が変更されたメソッドやバインディングがあるので注意ですね。
具体的には hasfocus が hasFocus に、ユーティリティ扱いだった ko.utils.unwrapObservable メソッドが ko.unwrap になったようです。今のバージョンでは互換性が維持されていますが、将来的には古い名前では動作しなくなる可能性もあるので注意が必要です。
個人的に便利だと思うのが template バインディングで、テンプレート名に observable を指定できるようになった点です。テスト用のコードを載せておきます。
<input type="button" data-bind="click: change" value="change" /> <div data-bind="template: { name: type }"></div> <script type="text/html" id="single"> <input type="text" data-bind="value: message" /> </script> <script type="text/html" id="multiple"> <textarea data-bind="value: message" /> </script> <script> var viewModel = { type: ko.observable("single"), message: ko.observable(), change: function () { this.type(this.type() == "single" ? "multiple": "single"); } }; ko.applyBindings(viewModel); </script>
このコードではテンプレートを type プロパティの値で切り替えていますが、type の値 == テンプレート名なので if バインディングなどを使わずにスッキリ書けました。実に便利ですね。
応用として img/audio/video タグをテンプレート使って切り替えて出力なども出来ると思います。
おっと、そうそう 2.3.0 から ko.observable や computed などの DOM が関係しない機能であれば、node.js 上でも使えるようになったみたいですよ。NPM からもインストール出来るみたいです。
https://npmjs.org/package/knockout
最後に 3.0.0 についてですが、バインディング周りを書き直して拡張可能な仕組みになったようです。Mutation Observers とか使うかな？と少し期待しましたが、特にそのあたりは導入されていないようです。
