2
jQueryを使用してデータを表現するHTMLとHTMLを使用するWebアプリケーションを作成します。単一のデータノードに関連する文書には、いくつかの表現が存在し得る。ユーザーは動的に作成することができます。 たとえば、データは表で表され、表で変更できます。さらに、ユーザは、特定のデータに迅速にアクセスするための「概要パネル」を拡張するという意見があります。jQuery/XML：DOM-Mutation-Eventsを使用したデータと表現の同期
イベントをトリガーするユーザーコントロールが1つ=>データを変更する必要がある場合=>同じデータに関連する他のユーザーコントロールをリフレッシュする必要があります。
<html>
<head>
<title>synchronize</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
//handling data
$.ajax({url: "./data/config.xml", cache: false, async: false, success: init});
var data;
function init(d) {
data = d;
$(".bottle", data).bind("DOMAttrModified", notifyRep);
}
function notifyRep(e) {
if(e.relatedNode.nodeName == "content")
$(this).trigger("changeContent");
}
//handling representation-sync
$(".bottle", data).bind("changeContent", function() {
$("#bottleRep1").val($(this).attr("content"));
});
$(".bottle", data).bind("changeContent", function() {
$("#bottleRep2").val($(this).attr("content"));
});
//handling modification
$("#bottleRep1").bind("change", function() {
$(".bottle", data).attr("content", $(this).val());
});
$("#bottleRep2").bind("change", function() {
$(".bottle", data).attr("content", $(this).val());
});
});
</script>
</head>
<body>
<div id="app">
<span>bottle-content:<input id="bottleRep1" type="text" value="test" /></span>
<span>bottle-content:<input id="bottleRep2" type="text" /></span>
</div>
</body>
実際の問題は、各ユーザーコントロールが独自の変更を処理することです。チェンジ・コンテンツ・ハンドラは、データ・モディファイアを知る必要があるため、表現更新をスキップできます。 この種の問題に対する既存の一般的な解決法はありますか？ そうでない場合は、良い解決策を提案できますか？