knockout.js - 映射大型 knockout 对象时 UI 锁定

Question

我已经完成了一些工作，但我认为我的问题在于 knockout 映射。

我正在发送一个大型电子表格(4000 行)在服务器端验证它，将 4000 个对象发送回对 knockout 映射的调用。

当它命中映射时 - 页面上的所有 gif(ajax 加载程序)都会停止几秒钟(直到映射完成)。当它最终返回时，所有返回的对象都会显示出来，整个过程按预期进行。

暂停看起来像是崩溃 - 在生产中很可能有更大的电子表格在运行，所以我真的想让事情看起来响应迅速。

有谁知道如何让这些 gif 继续旋转？谢谢

    public csvToWebAPIObject(file, onFinished, onError) {

        var formData = new FormData();
        formData.append("upload", file);

        var url = this.getFullURL();
        $.ajax({
            url: url,
            data: formData,
            processData: false,
            contentType: false,
            type: 'POST',
            success: (data) => {
                var mapped = ko.mapping.fromJS(data);
                onFinished(mapped);
            },
            error: function (err, ajaxOptions, thrownError) {
                if (onError != null) {
                    onError(err.responseText);
                }
            }
        });
    }

Answer 1

Knockout 从未将如此多的数据处理到 DOM 中。延迟来自于实际将数据渲染到页面上。不幸的是，最快的方法是在服务器端执行此操作，处理数据并返回完成的页面。

如果您必须使用 knockout ，您可以研究一下寻呼系统吗？我建议一次只渲染 100 行左右。您可以像下面这样做

JavaScript

this.items = ko.observableArray(dataFromTheServer);
this.currentPage = ko.observable(0);  
this.pageSize = ko.observable(100);
this.visibleItems = ko.computed(function(){
   return self.items.splice(self.currentPage() * self.pageSize(), self.pageSize()*self.currentPage() + self.pageSize());  //Returns 0 - 100, or 101 -> 200, etc     
});

html

<!-- do visibleItems instead of items -->
<div data-bind="foreach: visibleItems">
   //render items
</div>