Best way to reorder dom elements based on json data

Question

Once I create dom elements base on json data with jtemplates, what is the best way to reorder those elements based on changes to the json data (sorting, filtering, etc.).

Answer 1

Create new element, add child elements to this element, add parent element to the DOM.

Answer 2

So the method I'm using to solve this right now is I added a numbered index to each of my templated sections of html like so:

<div id="list">
    <div id="items-start"></div>
    {#foreach $T as item}
    <div id="item-{$T.item$index}" class="item">
        ...lots of stuff...
    </div>
    {#/for}
</div>

Then in my json items I added an attribute called InitialIndex to keep track of which dom item is associated with each item in the json. This way after I make any changes to my json data I can call this simple function to apply the changes to the dom:

function applyListChanges(items) {
    $('.item').hide();
    for (var item in items) {
        var index = items[item].InitialIndex;
        $('#items-start').append($('#item-' + index));
        $('#item-' + index).show();
    }
}

Please let me know if you have a better solution.

Answer 3

http://www.shadowbox-js.com/