KnockoutJS の便利なプラグイン

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

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

## ViewModel ユーティリティ

### [knockout.mapping (github)](https://github.com/SteveSanderson/knockout.mapping)

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

### [Knockout Validation (github)](https://github.com/Knockout-Contrib/Knockout-Validation)

言わずもがな、純正ともいうべきバリデーションライブラリです。
[Bootstrap と組み合わせてエラーを視覚化する](http://dora.bk.tsukuba.ac.jp/~takeuchi/index.php?%A5%D7%A5%ED%A5%B0%A5%E9%A5%DF%A5%F3%A5%B0%2FJavaScript%2Fknockout-validation%A4%C7Bootstrap%A4%CEform-group%A4%CBhas-error%A4%F2%C9%D5%A4%B1%A4%EB)といった使い方もあります。

### [ko.editables](https://github.com/romanych/ko.editables)

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

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

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

### [Observable Dictionary](https://github.com/jamesfoster/knockout.observableDictionary)

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

## バインディング

### [knockout-sortable (github)](https://github.com/rniemeyer/knockout-sortable)

`foreach` の代わりに使うだけで、ドラッグアンドドロップでアイテムを並び替えられます。
jQuery UI の `sortable` に依存しており、事前に読み込む必要があります。
[DEMO1](http://jsfiddle.net/rniemeyer/hw9B2/) [DEMO2](http://jsfiddle.net/rniemeyer/Jr2rE/) [DEMO3](http://jsfiddle.net/rniemeyer/AC49j/) [DEMO4](http://jsfiddle.net/rniemeyer/UdXr4/)

### [knockout-else (github)](https://github.com/brianmhunt/knockout-else)

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

```html:READMEから抜粋
<div data-bind='if: x'>X</div>
<div data-bind='else'>!X</div>
```

### [knockout-switch-case (github)](https://github.com/mbest/knockout-switch-case)

`switch` `case` を追加します。

```html:READMEから抜粋
<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)](https://github.com/sukobuto/ko-jQueryVisualState)

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

## シンタックス拡張

### [Knockout ES5 (紹介記事)](http://kojs.sukobuto.com/tips/knockout-es5)

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

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

### [Knockout.Punches (document)](http://mbest.github.io/knockout.punches/)

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

```html:ドキュメントから抜粋
<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](http://rniemeyer.github.io/knockout-kendo/index.html)

[「事実上の Knockout 公式ブログ」](http://www.knockmeout.net/) でおなじみ Ryan Niemeyer 氏による [Kendo UI](http://www.telerik.com/kendo-ui) の Knockout 統合。
大規模な UI ツールキットを MVVM で使えるのがありがたいです。

### [ko.datepicker](https://github.com/robbz/ko.datepicker/)

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

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

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

### [bootstrap-slider-knockout-binding](https://github.com/cosminstefanxp/bootstrap-slider-knockout-binding)

[bootstrap-slider](https://github.com/seiyria/bootstrap-slider) を Knockout で使えるようにするプラグインです。
[サンプル](http://cosminstefanxp.github.io/bootstrap-slider-knockout-binding/example.html) を見ていただければ一目瞭然です。

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

### [Bootstrap](http://getbootstrap.com/)

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

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

### [Ratchet](http://goratchet.com/)

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

### [Sammy.js](http://sammyjs.org/)

ルーティングライブラリの一つ。SPA を作るならルーティングは必須です。
Sammy.js は KnockoutJS のチュートリアルでも使われているライブラリです。
ほかにも[いろいろなルーティングライブラリ](http://qiita.com/matsumos/items/3736be27c5d3376cc795)があります。
[Page.js](http://visionmedia.github.io/page.js/) なんかが薄くて個人的にはおすすめです。

### [linq.js](http://neue.cc/reference.htm)

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

### [SuperAgent](http://visionmedia.github.io/superagent/)

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

## さらにおまけ - Web サイト

### [kosnipp.com](http://kosnipp.com/)

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