KnockoutJS の便利なプラグイン

随時追加していきます。
おすすめがありましたらコメントか編集リクエストください！

ほとんどが海外の情報なのでドキュメントが英語だったりしますが、なにせ Knockout に関するものなのでシンプルすぎるほどシンプルです。サンプルコードを読めば大体わかります！

ViewModel ユーティリティ

knockout.mapping (github)

プレーンオブジェクトを ViewModel にマッピング（変換）するユーティリティ。
KnockoutJS 作者によるプラグインです。
参考：Knockout.js の Mapping プラグインを使ったら凄く捗った件/しばやん雑記

Knockout Validation (github)

言わずもがな、純正ともいうべきバリデーションライブラリです。
Bootstrap と組み合わせてエラーを視覚化するといった使い方もあります。

ko.editables

ViewModel の変更を管理する。
プロパティごと、または ViewModel 単位で、

• 変更済みかをチェックする
• 変更を破棄して元に戻す
• 変更を承認する

といったことが可能で、CMS のエディタなどを作る際にとても重宝します。

Observable Dictionary

ko.observableArray のように監視可能な連想配列 ko.observableDictionary を追加します。
使う場面はそう多くはないかもしれませんが、覚えておいて損はありません。

バインディング

knockout-sortable (github)

foreach の代わりに使うだけで、ドラッグアンドドロップでアイテムを並び替えられます。
jQuery UI の sortable に依存しており、事前に読み込む必要があります。
DEMO1 DEMO2 DEMO3 DEMO4

knockout-else (github)

if の後に使える else, elseif を追加します。

<div data-bind='if: x'>X</div>
<div data-bind='else'>!X</div>

knockout-switch-case (github)

switch case を追加します。

<div data-bind="switch: orderStatus">
    <div data-bind="case: 'shipped'">
        Your order has been shipped. Your tracking number is <span data-bind="text: trackingNumber"></span>.
    </div>
    <div data-bind="case: 'pending'">
        Your order is being processed. Please be patient.
    </div>
    <div data-bind="case: 'incomplete'">
        Your order could not be processed. Please go back and complete the missing data.
    </div>
    <div data-bind="case: $default">
        Please call customer service to determine the status of your order.
    </div>
</div>

ko-jQueryVisualState (github)

jQuery を使った連続的なアニメーションを Knockout のデータバインドで実現するプラグイン。
複雑なエフェクトは ViewModel ではなく View で解決しましょう。
参考：KnockoutでシーケンシャルなjQueryアニメーション (qiita)

シンタックス拡張

Knockout ES5 (紹介記事)

ko.observable, ko.observableArray を ECMA Script 5 の getter/setter に置き換えるプラグイン。
よりエレガントなコードが書けます。

ただカスタムバインディング（特に2way-binding）を作る際は、Knockout ES5 に対応させる必要がある場合があります。
関連記事: Knockout ES5 に対応したカスタムバインディングを書く作法

Knockout.Punches (document)

View を Angular のように書けるようにするプラグイン

<div>Hello {{name}}.</div>
<!-- With a colon -->
<ul>
    {{#foreach: items}}
        <li>The current item is: {{name}}</li>
    {{/foreach}}
</ul>

<!-- Without a colon -->
{{#ifnot items().length}}
    <div>There are no items.</div>
{{/ifnot}}

<!-- Self-closing -->
{{#template 'addItem'/}}

ウィジェット

Knockout-Kendo.js

「事実上の Knockout 公式ブログ」 でおなじみ Ryan Niemeyer 氏による Kendo UI の Knockout 統合。
大規模な UI ツールキットを MVVM で使えるのがありがたいです。

ko.datepicker

Moment Datepicker という moment.js を使ったデートピッカー（カレンダーから日付を選択するウィジェット）を knockout で使えるようにするプラグイン。
moment.js 側の言語パックを使うことで日本語化も簡単にできます。

以下のように記述すると、ViewModel に設けた date というプロパティに 2014/11/02 という文字列としてバインドされます。

<input type="text"class="form-control date-picker"
    data-bind="datepicker: date, datepickerOptions: { dataType: 'format', format: 'YYYY/MM/DD' }"/>

bootstrap-slider-knockout-binding

bootstrap-slider を Knockout で使えるようにするプラグインです。
サンプル を見ていただければ一目瞭然です。

おまけ - Knockout と一緒に使うと便利なライブラリ

Bootstrap

UI ライブラリであり CSS テンプレートでもあります。
同じ UI ライブラリとして jQuery UI があるが、jQuery UI はプラグインとして Knockout で使えるように工夫する必要があるのに対して Bootstrap はそのまま自然に利用できます。とても相性がよいです。
さらに Knockstrap を同時に使えば Bootstrap JavaScript にある部品も MVVM で扱えます。

私は UI デザインにとても時間がかかってしまうため、サクッとアプリを作りたい場合は WrapBootstrap にあるようなテンプレートを活用しています。

Ratchet

Bootstrap と同じく UI ライブラリ & CSS テンプレートですが、こちらはよりモバイルアプリに特化しています。SPA 開発はもちろん、Cordova/PhoneGap でのアプリ開発にも重宝します。

Sammy.js

ルーティングライブラリの一つ。SPA を作るならルーティングは必須です。
Sammy.js は KnockoutJS のチュートリアルでも使われているライブラリです。
ほかにもいろいろなルーティングライブラリがあります。
Page.js なんかが薄くて個人的にはおすすめです。

linq.js

C# 発祥 LINQ (統合言語クエリ) の JavaScript 実装。
せっかく Knockout で宣言的で認識しやすいコードになるので、ViewModel 側の配列処理なんかも関数型ライクな「読ませない」コードを目指したいところです。

SuperAgent

Ajax 通信を専門に扱う薄いライブラリ。
jQuery を使わないのであれば、ぜひこちらを使ってみてください。
$.ajax よりもシンプルで柔軟な API を備えています。

さらにおまけ - Web サイト

kosnipp.com

再利用可能なカスタムバインディングを書いたら共有しましょう！