Question

我通过knockout和foreach绑定渲染一个html表。当排序底层的可观察数组时，当有大量数据时，重绘可能需要几秒钟，因此我想在网格上显示一个块/微调器，直到完成重绘。这是我的代码的简化小提琴：

我无法使用afterMove，因为它会触发每一行，而不是整个foreach。我找到了一个非常接近的淘汰赛：https://github.com/SteveSanderson/knockout/pull/690。然而它仍然似乎没有完全工作，因为页面在重绘时被锁定所以我的微调器直到所有重绘之后都没有上升，此时我还需要再次删除它...任何建议？

PS＆GT;我知道这可能会有一些用户体验问题，但只是幽默我;）

Answer 1

应用于数组的排序后，您可以知道数组中的哪个项目是最后一项。然后在'afterMove'事件处理程序中等待项目元素移动到新位置并隐藏Progess标记的时刻。这是小提琴：

http://jsfiddle.net/rustam/jdavU/8/

您可以利用observableArray的'change'事件和'foreach'绑定的'afterMove'事件。

var lastMovedData = null;

Grid.prototype.onChange = function(value){
    lastMovedData = value && value.length ? value[value.length - 1] : null;
    console.log('show Progress image');
};

Grid.prototype.onAfterMove = function(value, index, data){

    //console.log('after move');

    if(lastMovedData && data.key == lastMovedData.key){
        console.log('hide Progress image. Last item\'s key: ' + data.key);
    }

};

Answer 2

好奇，你有没有看过分页？

此外，我认为你会得到更好的性能避免容器减少绑定并直接应用于tr。您还可以避免跨度上的模板并使用文本绑定吗？您可能需要使数据更具多态性，或确保列属性名称与日期属性名称匹配。如

text: $parent[$data.propName]

就遮罩而言，你可以在网格上设置一个透明度绝对的div，并用bool标志切换它。我已经在复杂的场景中使用自定义绑定完成了这项工作。这里的一个问题是网格的大小在第一次填充时正在增长。它看起来也像静态数据。您可以想出一个聪明的绑定来保存Dom节点的排序状态。

Answer 3

我能够使用setTimeout加上此提交来完成此操作：“Add a global before and after callback for foreach/template bindings”。由于我无法在我的小提琴中轻松链接到这个自定义的淘汰版本，我使用Rustam的代码来完成解锁（但是在我的真实代码中，我喜欢{a}上干净的seanami after事件。 {1}}是）。这是一个有效的例子：

http://jsfiddle.net/cmontgomery/MvBBC/

setTimeout允许块代码覆盖网格的足够时间，然后继续进行排序：

foreach/template

在绘图时显示一个旋转器/阻挡一个挖空网格

3 个答案: