2011年09月28日

jQueryの「Data Link」で、フォームと楽々連動できる

今回はjQueryのData Linkについてです。




Data Linkって何?


jQueryのData Linkは、ユーザーがテキストボックスなどに入力した値と、プログラムの変数やオブジェクトの値を連動させる仕組みです。.NETでいうところのバインドと同様の機能になります。


Data Link


通常、「ユーザーが入力した値」をそのままプログラムで使いまわすのではなく、いったん、変数に入れてから使いまわすことが多いです。そうすると「ユーザーが入力した値」と「変数に入れた値」の同期を取る必要があります。Data Linkはその同期処理をやってくれるので便利、ってことですね。

Data LinkはjQueryの本体に実装されてるわけではなく、jQueryの公式プラグインです。プラグインのダウンロードやAPIについては、jQueryのサイト(英語)を参照してください。




最も単純なサンプル


まずは単純なサンプルです。テキストボックスなどがformタグの中に入っている場合、以下の2行でData Linkできます。

var person = { };
$("form").link(person);


サンプル1のソースコードを見てみてください。personオブジェクトに対して代入していないのに、personオブジェクトにユーザーが入力した値が入っています。

<form>
First Name:<input type="text" name="firstName" /><br />
Last Name:<input type="text" name="lastName" />
</form>
<input type="button" value="表示" id="Show" />
<script>
var person = { };
$("form").link(person);
$("#Show").click(function(){
alert("First Name:" + person.firstName + "\nLast Name:" + person.lastName);
});
</script>


テキストボックスのname属性がpersonオブジェクトのプロパティになります。サンプル1では、テキストボックス→personオブジェクト、の方向に連動しましたが逆はどうでしょう?

サンプル2では、personオブジェクト→テキストボックス、の方向に連動しています。オブジェクト側に値をセットするときはsetField()関数を使いましょう。ついでに言うと、setField()の戻り値もpersonオブジェクトになるのでメソッドチェーンで書けます。

<form>
First Name:<input type="text" name="firstName" /><br />
Last Name:<input type="text" name="lastName" />
</form>
<input type="button" value="表示" id="Show" />
<script>
var person = { };
$("form").link(person);
$("#Show").click(function(){
$(person).setField("firstName", "名").setField("lastName", "姓");
});
</script>





少し複雑なサンプル


テキストボックスがformタグの中に入っていない場合、或いはinputタグ以外のDOM要素とData Linkする場合はどうでしょうか?サンプル3ではspanタグと連動しています。

Object.firstName: <span id="objFirst"></span><br/>
Object.lastName: <span id="objLast"></span>
<input type="button" value="表示" id="Show" />
<script>
var person = { };
$("#objFirst").link(person, {
firstName: {
name: "objFirst",
convertBack: function(value, source, target) {
$(target).text(value);
}
}
});
$("#objLast").link(person, {
lastName: {
name: "objLast",
convertBack: function(value, source, target) {
$(target).text(value);
}
}
});
$("#Show").click(function(){
$(person).setField("firstName", "名").setField("lastName", "姓");
});
</script>


何かいろいろ書いてありますね。赤い文字の部分がpersonオブジェクトが持つ各プロパティの名前になります。の文字の部分がDOM要素(ここではspanタグ)のid属性になります。link()関数のオプションについては以下のような感じです。

name:
連動するDOM要素(ここではspanタグ)のid属性、またはname属性です。

convertBack:
オブジェクト(ここではperson)からDOM要素(ここではspanタグ)に同期する際の処理です。上記の例ではspanタグのテキストにそのまま文字列をセットしていますが、文字列をフォーマットしたり、値を四捨五入したり、ちょっとした工夫をするのもありです。
convertBackの引数の意味は、
 value:オブジェクト側から渡された値("名"や"姓")
 source:オブジェクト(personオブジェクト)
 target:DOM要素(span)
です。

convert:
convertBackの逆です。DOM要素からオブジェクトに同期する際の処理です。上記の例では使われていません。

twoWay:
trueまたはfalseをセットします。falseをセットすると、オブジェクト→DOM要素、の連動が無効になります。デフォルトはtrue(双方向に連動)です。上記の例では使われていません。




コンボボックスやラジオボタンもData Linkできる?


inputタグの全type、その他form系タグについて試してみました。サンプル4をご覧ください。HTML5で追加されたtypeやタグについては、ブラウザごとに挙動が違うかもしれません。以下、簡単に結果を書いておきます。

テキストボックス、およびその亜種については問題なさそうです。表示されてる値が、オブジェクト⇔DOM要素、の双方向で連動します。hiddenについても同様です。

select(コンボボックス)も問題なさそうです。オブジェクト⇔DOM要素、の双方向で連動します。なお、連動する値は「選択されてる項目のvalue」です。multiple(複数選択あり)にした場合、「選択されてる項目のvalue」の配列がやり取りされます。素直な動きですね。好感度アップです。

ボタン系は大丈夫そうです。ボタンのvalueが連動します。要するに、ボタンのキャプションが連動します。あまり使う機会はなさそうですが。

ラジオボタンやチェックボックスは・・・、ここら辺から雲行きが怪しくなります。まともに連動しません。「Data Linkプラグインを改造しろ」って言ってる人がいますね。以下を参照。
Setting radio buttons with setField in datalink (jQuery)

file(サーバーにファイルをアップロードするときのあれ)も連動しません。JavaScriptからfileのファイルパスにアクセスできませんから、当たり前かもしれません。ブラウザの仕様ですから諦めましょう。セキュリティの都合とはいえ少し残念。




DOM要素から別のDOM要素にData Linkできる?


できます。ただし直接連動ではなく、

DOM要素→オブジェクト→別のDOM要素

という風に2段階で連動させます。jQueryのサイト(英語)にあるExampleもそうですね。

もう少し見栄えのいいサンプルを作ってみました。サンプル5をご覧ください。イベントがらみの処理などがなく、すっきりとしたソースコードになってると思います。IE9以下でも動くと思いますが、「<input type="range" />」に対応してないのであまり気持ちよくありません。Chromeなど、まともなブラウザでご覧ください。




まとめ


jQueryのData Linkは、うまく使うとプログラムがすっきりして幸せになれます。また、少しの工夫で幅が広がりそうな予感がします。ぜひとも使ってみてください。















タグ:jquery
posted by ぺるたご at 22:23| Comment(0) | TrackBack(0) | 日記 | このブログの読者になる | 更新情報をチェックする
この記事へのコメント
コメントを書く
お名前:

メールアドレス:

ホームページアドレス:

コメント:

認証コード: [必須入力]


※画像の中の文字を半角で入力してください。
この記事へのトラックバックURL
http://blog.seesaa.jp/tb/227966717

この記事へのトラックバック
×

この広告は1年以上新しい記事の投稿がないブログに表示されております。