jQuery/XML：使用 DOM-Mutation-Events 同步数据和表示
我正在创建一个 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>
实际的问题是每个用户控件处理自己的修改。 更改内容处理程序需要知道数据修饰符，因此它可以跳过表示更新。 针对此类问题是否有现成的通用解决方案？ 如果没有，您能否提出一个好的解决方案的建议？
I'm creating a web application which uses jQuery to modify and HTML to represent the data. There can be several representations in the document related to a single data node. The user can dynamically create them.
For example, data will be represented and can be modified in tables. Additionally the user has the opinion to extend a "quick-overview-panel" to access specific data quickly.
If one user-control triggers an event => data must be modified => other user-controls related to the same data need to be refreshed.
<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>
The actual problem is that each user-control handles its own modification. The change-content handler needs to know the data-modifier, so it can skip the representation-update.
Is there an existing general solution for this kind of problem?
If not, can you make suggestions for a good solution?
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
您可以尝试创建一个自定义函数来处理触发刷新时执行某些操作
$('body').bind('foo', function(e, param1, param2) {
警报（参数1 + '：' + 参数2）;
});
然后您可以在 dta chnage 上调用上面创建的函数，以便该函数获得触发器并执行刷新
像这样
$('body').trigger('foo', [ 'bar', 'bam' ]); // 警报 'bar: bam'
you can try to create a custom function that will handle the perform some action when trigger for refresh
$('body').bind('foo', function(e, param1, param2) {
alert(param1 + ': ' + param2);
});
then you can call the above created function on chnage of dta so the function get trigger and perform refresh
like this
$('body').trigger('foo', [ 'bar', 'bam' ]); // alerts 'bar: bam'