Нокаут Сортируемые проблемы с производительностью

Question

Я только что взял на себя проект, который реализует сортируемый плагин, и одной из первых проблем, которые мне нужно решить, является проблема производительности. У меня нулевой опыт с нокаутом, поэтому, пожалуйста, потерпите меня, когда я это объясняю.

По сути, это модуль, который позволяет пользователю выбирать количество изображений для создания файла PowerPoint. Одна из функций позволяет пользователю сортировать изображения (перетаскивая его в другую позицию).

Это прекрасно работает, когда мы тестируем около 40 или около того изображений, однако, когда у нас более 50 изображений и мы пытаемся изменить сортировку, мы видим заметное снижение производительности.

Объект данных составлен так:

dataobject": [
{
  "id": xx,
  "srcID": xx,
  "srcPresentationId": xx,
  "name": "image title",
  "isNew": false,
  "isDeleted": false,
  "order": 0,
  "isSelected": false,
  "image": "image location",
  "thumbnail": "thumbnail location",
  "parentPresentationId": xx
},
{
  "id": xx,
  "srcID": xx,
  "srcPresentationId": xx,
  "name": "image title",
  "isNew": false,
  "isDeleted": false,
  "order": 0,
  "isSelected": false,
  "image": "image location",
  "thumbnail": "thumb location",
  "parentPresentationId": xxx
}]

Вот код, который вызывается

    $(".new-slides-edit").droppable({
    accept: ".slide-box-edit",
    greedy: true,
    drop: function(event, ui) {
        $("body").css("cursor", "default");

        var slide = ui.draggable.get(0);
        var context = ko.contextFor(slide);
        var presentation;
        try {
            // if is not in edit mode
            if (!editingNewSlides()) {
                presentation = context.$root.selectedUserPresentation;
            } else {
                presentation = context.$root.selectedPresentationForEditing;
            }
            presentation().hasChanged(true);
            presentation().slideOrderChanged(true);

        } catch(e) {
            logger.log(e);
        }
        event.stopImmediatePropagation();
        event.stopPropagation();
        return false;
    }
});

HTML:

<div class="new-slides-edit presentation-dialog-short presentation-dialog hidden" data-bind="visible: editingNewSlides() && selectedSlide() == null">
<!-- ko with:selectedPresentationForEditing -->
    <section class="slides">
        <div class="slides-scroll"
             data-bind="sortable: { attributeToChange: hasChanged, template: 'showPresentationToEdit', data: slides, options: { containment: 'document', cancel: '.slide-box-magnify, .selected', delay: 150, revertDuration: 150} }">
        </div>
    </section>
    <!-- /ko -->

    <script id="showPresentationToEdit" type="text/html">
        <div class="slide-box slide-box-edit" data-click="" data-bind="css: { 'selected': isSelected() }">
            <img data-bind="attr: { src: image }" alt="" />
            <div class="slide-box-magnify" data-click=""><span data-bind="text: (order() + 1)"></span></div>
        </div>
    </script>
</div>  

Я предполагаю, что каждый раз, когда объект перемещается в другое положение, весь объект данных массива повторно связывается, что вызывает проблему с производительностью.

Я понимаю, что этого может быть недостаточно для продолжения.