Question

我正在创建一个使用jQuery进行修改的Web应用程序，并使用HTML来表示数据。文档中可以有多个与单个数据节点相关的表示。用户可以动态创建它们。例如，数据将被表示，并可在表中进行修改。此外，用户还可以扩展“快速概览面板”以快速访问特定数据。

如果一个用户控件触发了一个事件=＆gt;必须修改数据=＆gt;需要刷新与相同数据相关的其他用户控件。

<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>

实际问题是每个用户控件都会处理自己的修改。 change-content处理程序需要知道data-modifier，因此它可以跳过表示更新。是否存在针对此类问题的现有通用解决方案？如果没有，你能提出一个好的解决方案的建议吗？

Answer 1

您可以尝试创建一个自定义函数，该函数将在触发刷新时处理执行某些操作
$（'body'）。bind（'foo'，function（e，param1，param2）{
alert（param1 +'：'+ param2）;
}};

然后你可以在dta的chnage上调用上面创建的函数，这样函数得到触发并执行刷新，就像这样 $（'body'）。trigger（'foo'，['bar'，'bam']）; //提醒'bar：bam'

jQuery / XML：使用DOM-Mutation-Events同步数据和表示

1 个答案: