jQuery Data Linkingプラグインを使えば、例えばフォームの内容を更新すればフォームにバインドされているjavascriptオブジェクトが変わり、javascriptオブジェクトの内容を更新すればフォームのデータが変わります。このため、例えばフォームを更新する際に、フォームデータを取得するコードを手作業で書く必要がなく、機械的な操作から解放され、データそのものに集中できるなど、非常に便利です。このわかりやすい表現が理解しにくいかもしれませんが、jQuery Data Linkingプラグインを使用するためのごく小さな例を以下に示します!
まず、jQueryファイルとjQuery Data Linkingプラグインを以下のように紹介します:
<script type="text/javascript" src="http://..com/ajax/libs/jquery/..4/..js"></script>
<script src="jquery.datalink.js" type="text/javascript"></script>
次に、使用されているhtmlマークアップを見ることから始めます:
<form id="formData" action="">
Name:<input id="user" /><br />
Website:<input id="website" />
<input type="button" id="show" value="Result" />
</form>
以下は、javascriptオブジェクトと、それをフォームにバインドするためのlink()メソッドです。
<script type="text/javascript">
var users = { name: "あなたの友人", website: "jquery001.com" };
$(document).ready(function () {
$("#formData").link(users, {
name: "user",
website: "website"
});
});
</script>
次に、例えばユーザー名が "jQuery Learning "に変更された場合、javascriptユーザーオブジェクトのname値を見てみましょう:
$("#show").click(function () {
alert(users.name);
});
結果は以下の通り:
jQuery Data Linkingを使った後は、確かに機械的なコーディングから解放されるのですが、残念ながら私はこのMicrosoft jQueryプラグインを特定のプロジェクトで使ったことがありません。まあ、この記事は導入の非常に簡単な役割を果たすでしょう、あなたが非常に興味を持っている場合は、jquery-datalinkを見ることができます。