随時追加していきます。
おすすめがありましたらコメントか編集リクエストください!
ほとんどが海外の情報なのでドキュメントが英語だったりしますが、なにせ 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
再利用可能なカスタムバインディングを書いたら共有しましょう!