Tag Archives: jQueryUI

Knockout.js で jQuery UI ‘sortable’を使う

前回に引き続き、勉強中の Knockout の記事です。 今回は、リッチなUIを手軽に実装できる jQuery UI との組み合わせを検証してみました。 jQuery UI ‘sortable’ とは sortable とは jQuery UI に含まれる機能で、リスト要素などの各アイテムをドラッグ&ドロップで並び替えできるようにするものです。 sortable の動きについては jQuery UI Demos & Documentation を見ていただければわかると思います。 Knockout と組み合わせる デモはこちらです(別画面で開きます) JSFIDDLE でも公開しました Knockout で jQuery UI などのプラグインをバインドで実行できるようにするため、カスタムバインディングを作成します。 今回は、名前もそのまま「sortable」というカスタムバインディングを作成しました。 ko.sortable.js 4.35KB ライセンスフリー ↑右クリックして「名前をつけて保存」してください。 knockout.js の後に読み込まれるように設置すればOKです。 次のサイト・ページを参考にしました。 ・http://stackoverflow.com/questions/4146751/knockoutjs-with-jquery-ui-sortable ・http://jsbin.com/knockoutsortable/20/edit HTML で、通常の foreach バインディング(もしくは template バインディング)とともにバインドします。 (相応の ViewModel が適用されているものとします。) 1 2 … Continue reading →

Posted in: Javascript, Web