Knockout.js 3.0.0リリース

Knockout.js 3.0.0がリリースされました。こちらが詳しいです。スクリーンキャスト付き。

Knockout.js 3.0 Highlights - Knock Me Out

個人的な感想としては、すごい機能が追加された！というよりは、すごい機能を追加するための拡張基盤が整備されたリリースのように見えます。で、それを活用した拡張の一例がKnockout.Punches です。なのでKnockout.js自体の変更を見るよりこちらを見たほうがインパクトあると思います。

例えば今までこんな風にvirtual elementを使って書いていたのを、

Hello, <!-- ko text:name --><!-- /ko -->

Knockout.Punchesを使うと、こう書けます。

Hello, {{ name }}

ソースを全部載せるとこんな感じ

<input data-bind="value: name"><br>
Hello, {{ name }}
<script src="knockout-3.0.0.js"></script>
<script src="knockout.punches.js"></script>
<script>
    ko.punches.interpolationMarkup.enable();
    ko.applyBindings({
        name: ko.observable()
    });
</script>

このように、<!-- ko text: name --><!-- /ko -->の代わりに{{ name }}と書くことができます。このような構文の追加を本体でなく拡張だけでできるのが面白いところです。これは要するにマクロみたいなもんで、実際には最初に{{ name }}を<!-- ko text: name --><!-- /ko -->に書き換えているだけです。

他にも<oreoretag>みたいな独自のタグを追加する拡張を自作することも可能です。

あとは、そもそもchecked BindingにArrayをバインドできることを知らなかったので、Orderd BindingとかcheckedValue Bindingの説明のあたりは「へー今までそんなことできてたんだ」的な感じで見てました。