Knockout 自定义绑定和慢处理答案

【问题标题】：Knockout custom binding and slow processingKnockout 自定义绑定和慢处理
【发布时间】：2014-06-16 15:51:51
【问题描述】：

我正在使用 Knockout 3.0 将表格数据呈现到网页。

它将大约 200 行加载到表格中，我正在使用自定义绑定处理程序来允许将功能拖放到表格列中。

这个表是从数据的树形结构中获取数据（每个绑定多个用于遍历）

问题在于，与 IE 相比，Internet Explorer 中的页面加载速度非常慢，大约需要 15 秒，而 Firefox 和 chrome 的速度非常快（大约 3 秒）。

我删减了代码，发现我的一个自定义绑定（可放置的绑定导致了问题）。

如何提高 IE 中的渲染速度。 (6,7,8,9)？

ko.bindingHandlers.droppable = {
    init: function (element) {
        $(element).droppable({
            hoverClass: "ui-state-active",
            activeClass: "ui-state-hover",
            accept: ".ui-draggable", //  .selected
            tolerance: "pointer",
            drop: function (event, ui) {
                var data = ko.dataFor(element);
                // Gets dragged item and manipulates the data
            }
        });
    }
};

并且在像<td class="outerDroppable b" data=bind="droppable">这样的表列中被调用

我想到的可能选项。

加载整个表数据后应用自定义绑定？？（但我怎么能这样做）
我也尝试过使用延迟更新插件

【问题讨论】：

IE9 已经 3 岁了，这部分解释了这些差异。您有 IE
即使是 IE 11 也有很大的不同
呃，奇怪的是，IE11 经常做一个诚实的工作。
你确定是绑定的问题，而不是 jQuery UI？如果您手动创建 200 行并将 droppable 绑定到它，性能如何？
@janfoeh 我删除了所有自定义绑定，但加载相同数量的行仍然需要 4 秒。所以速度慢也是由敲除绑定造成的

标签： javascript jquery jquery-ui knockout.js knockout-3.0

【解决方案1】：

你可以试试这个帖子里给出的解决方案：How can I make my jquery draggable / droppable code faster?

如此多的掉落目标的存在似乎使性能如此慢。如果可能，尝试将表设置为单个放置目标，然后根据 drop 中的位置数据计算目标表格单元格事件。

【讨论】：