2

jQueryを使用してデータを変更し、HTMLを使用してデータを表すWebアプリケーションを作成しています。ドキュメントには、単一のデータノードに関連する複数の表現が含まれる場合があります。ユーザーはそれらを動的に作成できます。たとえば、データは表で表され、変更できます。さらに、ユーザーは、特定のデータにすばやくアクセスするために「クイック概要パネル」を拡張するという意見を持っています。

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>

実際の問題は、各ユーザーコントロールが独自の変更を処理することです。変更コンテンツハンドラーはデータ修飾子を認識している必要があるため、表現の更新をスキップできます。この種の問題に対する既存の一般的な解決策はありますか？そうでない場合は、良い解決策の提案をすることができますか？

4

1 に答える 1

0


$('body').bind('foo', function(e, param1, param2) { alert
(param1 + ': ' + param2 );
});

次に、dta の変更時に上記で作成した関数を呼び出して、関数がトリガーを取得し、次のように更新を実行できます
$
('body').trigger('foo', [ 'bar', 'bam' ]); // アラート 'bar: bam'

于 2011-09-05T06:53:07.403 に答える