jQuery / XML: синхронизация данных и представлений с использованием DOM-Mutation-Events - PullRequest
Новая
       8

jQuery / XML: синхронизация данных и представлений с использованием DOM-Mutation-Events

2 голосов
/ 24 июля 2009

Я создаю веб-приложение, которое использует 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 Ответ

0 голосов
/ 05 сентября 2011

вы можете попытаться создать пользовательскую функцию, которая будет обрабатывать выполнение некоторых действий при запуске обновления
$ ('body'). Bind ('foo', function (e, param1, param2) {
alert (param1 + ':' + param2);
});

, затем вы можете вызвать созданную выше функцию в chnage of dta, чтобы функция получила триггер и выполнила обновление
следующим образом
$ ('body'). trigger ('foo', ['bar', 'bam']);// оповещения 'bar: bam'

...