Question

我刚刚接手了一个实现knockout-sortable插件的项目，我需要解决的首要问题之一就是性能问题。我对Knockout没有任何经验所以请在解释这个时请耐心等待。

基本上它是一个允许用户选择数字图像来创建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>

我假设每次将对象移动到另一个位置时，整个数组数据对象将被重新绑定，从而导致性能问题。

我知道这可能不足以让您继续使用。

Knockout可排序的性能问题

0 个答案: