Monthly Archives: 8月 2012

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

Knockout.js勉強中! サンプルアプリ『電卓』

最近、Knockout というJavascriptフレームワークにハマってます。 JSでの開発をラクにするKnockout Knockoutは一言で言えば、「HTML(CSS)とJavascriptによる開発にMVVMモデルを適用する」ためのフレームワークです。 フレームワークといっても、開発者を制約で縛り上げるようなものではなく、開発がとてもラクになります。 たとえば Knockout では、HTMLの要素と、Javascriptで書いたシンプルなオブジェクトのプロパティを、定義ベースで関連付けます。 関連付けられたプロパティが更新されると、HTMLの要素も上書きされます。 これだけでも、次のようなメリットが考えられます。 「開発効率向上」マークアップエンジニアとスクリプトエンジニアの分業 「保守性向上」マークアップ(View)の変更によるスクリプト(ViewModel)への影響がほとんどない 単純に、書くべきコードの量が減る! Knockoutがフレームワークとして介入するのは HTML(View) と Javascript(ViewModel) との間を取り持つ部分のみです。 したがってjQuery等の既存のフレームワークも、問題なく利用することができます。 詳細は本家サイトにて公開されているデモムービー(英語だがなんとなく見てるだけでも結構わかる!)などをご参考下さい。 同サイトのチュートリアルをすべてクリアすれば、Knockoutを理解するとともにMVVMパターンのメリットについても少し詳しくなれます。 12/23 追記: Knockout ドキュメントの翻訳を開始しました。 Knockout.日本語ドキュメント 下記のサンプルは、やや「モンキーレンチで釘を打っている」ような、意味開発者の意図を伝えきれていないという問題があります。Knockout でどんなことができるかを手っ取り早く知りたいという方には、Knockout Demo & Tips をご覧になることをお勧め致します。 勉強中にサンプルつくりました というわけで、さっそくサンプルとして電卓を作ってみました。 ただの電卓だけだと、MVVMの恩恵をあまり受けられないので、計算履歴を表示するようにしました。 デモはこちら HTML (View) 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 … Continue reading →

Posted in: Javascript, Web