Data Link - jQueryのためのデータバインディング

作者 Jonathan Allen , 翻訳者 能仁 信亮 投稿日 2010年10月12日

セクション

デベロップメント

トピック

jquery ,

Ruby ,

JavaScript ,

Java ,

動的言語 ,

言語 ,

.NET ,

プログラミング

共有 |

原文(投稿日：2010/10/08)へのリンク

Microsoftによって作成された３つのjQueryライブラリのうち２つめは、双方向のデータバインディングのサポートを付け加えるものだ。WPFやSilverlightと目的は同じながら、実装は根本的に異なる。

Data Linkはlinkというひとつのメソッドを使って、フォームのinput要素と、ターゲットのオブジェクトをひも付ける。XAMLでのDataContextの設定と同様に、linkはform自身から呼び出される。デフォルトでは、すべての名前のつけられたinput要素とオブジェクトの対応するフィールドが双方向でバインディングされる。しかし、多くのオプションが利用可能だ。

すべての要素をバインディングするかわりに、開発者は“{fieldName: "elementName", …}”のような形の対応付けの辞書をパラメータとして渡すことができる。これによって開発者は、バインディングの対象を明示的に指定したペアに限定することができる。任意の指定した要素に対して、“twoWay: false”を指定することで、オブジェクトに変更がなされても対応するinput要素に変更が及ばないようにすることが可能だ。

値の変換処理もtwoWayプロパティと同じように、“convert”と“convertBack”という名称を使って利用できる。XAMLとは違って、関数に処理を渡すか、匿名関数としてコンバータをインラインで定義するかを選択することができる。もし、あるフィールドが変更された時に、他のフィールドを変更する必要がある場合には、converterメソッドを利用することで実現できる。

jQuery Data Link APIの利用には、現時点でリリースされていないjQuery 1.4.3が必要である。jQuery 1.4.3とjQuery Data Linkはgithubから取得可能だ。jQuery Data Linkは、MITおよびGPLバージョン2ライセンスのもとで利用可能だ。