映射大型剔除对象时的 UI 锁定答案

【问题标题】：UI locks when mapping large knockout object映射大型剔除对象时的 UI 锁定
【发布时间】：2014-04-29 16:19:08
【问题描述】：

我有一些事情要做，但我认为我的问题归结为淘汰赛映射。

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

当它到达映射时 - 页面上的所有 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);
                }
            }
        });
    }

【问题讨论】：

您在代码中的哪个位置应用了“加载”.gif 文件？我假设您正在显示“正在加载”.gif 并然后进行 AJAX 调用，对吗？只是想澄清一下
ko.mapping.fromJS 会观察到data 中的所有值，这真的有必要吗？
rwisch45 - 是的，我想知道在显示 gif 和其余 javascript 之间是否存在某种联系 - 所以我只是在页面顶部放置了另一个 ajax 加载器，从一开始就可见 - 那当映射被击中时也会停止。

标签： knockout.js knockout-mapping-plugin

【解决方案1】：

Knockout 从未将这么多数据处理到 DOM 中。延迟来自实际将数据渲染到页面上。不幸的是，最快的方法是在服务器端进行，处理数据，然后返回完整的页面。

如果你必须使用淘汰赛，你能研究做一个分页系统吗？我建议一次只渲染 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>

【讨论】：