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

Posted

技术标签:

【中文标题】jQuery/XML:使用 DOM-Mutation-Events 同步数据和表示【英文标题】:jQuery/XML: synchronizing data and representations using DOM-Mutation-Events 【发布时间】:2010-11-13 17:35:50 【问题描述】:

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

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

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

实际的问题是每个用户控件都处理自己的修改。更改内容处理程序需要知道数据修饰符,因此它可以跳过表示更新。 此类问题是否存在现有的通用解决方案? 如果没有,您能提出一个好的解决方案吗?

【问题讨论】:

【参考方案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 同步数据和表示的主要内容,如果未能解决你的问题,请参考以下文章

jQuery XML 解析/遍历

jQuery XML REST 访问控制允许来源

学习计划-----java初级工程师

SpringSpringMVCMyBatis

测试使用

第一篇 用于测试使用