0

ビューをDOMにレンダリングするデータモデルと多くのレンダリングメソッドがあります。現在、データが変更されると、対応するメソッドで DOM を再レンダリングします。それはうまく動作します。ここで私が望むのは、DOM 全体を再レンダリングするのではなく、現在の DOM を render メソッドの出力と比較し、相違点のみを置き換えることです! なぜそれが必要なのですか？css-transitions でアニメーションをスムーズにしたいので、DOM 全体を置き換えることはできず、違いのみを置き換えることができます。

特定の変更を確認せずに、この作業を行うための意見を待ちきれません。抽象化したい。

4

1 に答える 1

0

わかりました、私はそれを難し​​い方法でやりました...誰かがよりエレガントな解決策を持っているなら、彼がそれを共有してくれたらうれしいです! :-)

function applyChanges(source, destination) {

    var srcAttributes = source[0].attributes;
    var dstAttributes = destination[0].attributes;

    for (var i = 0; i < dstAttributes.length; i++) {
        if (typeof srcAttributes[dstAttributes[i].nodeName] === "undefined") {
            destination.removeAttr(dstAttributes[i].nodeName);
        }
    }

    for (var i = 0; i < srcAttributes.length; i++) {
        if (typeof dstAttributes[srcAttributes[i].nodeName] === "undefined" || srcAttributes[srcAttributes[i].nodeName].nodeValue != dstAttributes[srcAttributes[i].nodeName].nodeValue) {
            $(destination).attr(srcAttributes[i].nodeName, srcAttributes[i].nodeValue);
        }
    }

    if (destination[0].children.length != source[0].children.length) {
        destination.html(source.html());
        return;
    }

    for (var i = 0; i < source[0].children.length; i++) {
        var srcChild = source[0].children[i];
        var dstChild = destination[0].children[i];

        if ($(srcChild).outerHtml() != $(dstChild).outerHtml()) {
            applyChanges($(srcChild), $(dstChild));
        }
    }

    if (destination.html() != source.html()) {
        destination.html(source.html());
    }
}
于 2013-02-02T12:32:29.220 に答える