0

我正在通过敲除和 foreach 绑定呈现一个 html 表。在对底层可观察数组进行排序时，如果有大量数据，重绘可能需要几秒钟，所以我想在网格上显示一个块/微调器，直到重绘完成。这是我的代码的简化小提琴：

http://jsfiddle.net/cmontgomery/bkcsR/

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

PS> 我知道这一切可能存在一些用户体验问题，但请幽默我 ;)

4

3 回答 3

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);
    }

};
于 2012-12-31T19:58:41.710 回答
0

只是好奇，你研究过分页吗？

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

text: $parent[$data.propName]

至于掩码，您可以在网格上放置一个绝对不透明度的 div，并使用 bool 标志对其进行切换。我已经在复杂的场景中使用自定义绑定来完成此操作。这里的一个问题是网格的大小随着第一次填充而增长。它也看起来像静态数据。您也许可以想出一个巧妙的绑定，将 Dom 节点保存为排序状态。

于 2012-12-29T01:52:34.817 回答
0

我能够使用setTimeout加上这个提交来完成这个：“为foreach/模板绑定添加一个全局的前后回调”。由于我无法在我的小提琴中轻松链接到这个自定义构建的淘汰赛，我使用Rustam的代码来完成解锁（但是在我的真实代码中，我喜欢 seanami 的after事件foreach/template是多么干净）。这是一个工作示例：

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

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

Grid.prototype.sort = function (column) {
    $("#mygrid").block({ message: '<div />', overlayCSS: { opacity: 0.1, borderRadius: '4px' }, css: { border: 'none', background: 'transparent'} });
    setTimeout(this.doSort.bind(this, column), 100);
};
于 2013-01-02T16:09:17.040 回答