Лучший способ изменить порядок элементов DOM на основе данных JSON

Question

Как только я создам элементы dom на основе данных json с помощью jtemplates, каков наилучший способ переупорядочить эти элементы на основе изменений данных json (сортировка, фильтрация и т. Д.).

Answer 1

Итак, метод, который я сейчас использую для решения этой проблемы, заключается в том, что я добавил нумерованный индекс к каждому из моих шаблонных разделов HTML, например:

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

Затем в свои элементы json я добавил атрибут InitialIndex, чтобы отслеживать, какой элемент dom связан с каждым элементом в json. Таким образом, после внесения каких-либо изменений в мои данные JSON я могу вызвать эту простую функцию, чтобы применить изменения к DOM:

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

Пожалуйста, дайте мне знать, если у вас есть лучшее решение.

Answer 2

Самый чистый и простой способ сделать это будет следующим:

1) Переупорядочить / отсортировать список объектов JSON 2) Очистите список DOM (или удалите список в зависимости от вашего jTemplate), что-то вроде этого

$('#list').html('');

3) Затем заново заполните список, повторно запустив jTemplate для объекта JSON.

Имейте в виду, что рендеринг списка в DOM с использованием механизма шаблонов происходит быстро, делает ваш код намного чище и не требует сложной логики для сопоставления объектов JSON с их эквивалентом DOM

Answer 3

Создание нового элемента, добавление дочерних элементов к этому элементу, добавление родительского элемента в DOM.