在挖空渲染视图时显示进度条

Question

我有一个复杂的页面，它使用knockout来通过模板渲染内容。渲染需要大约10秒钟，所以我想在发生这种情况时显示进度条。我试图在模板中添加一个回调打破页面的afterRender方法 - 我认为这种方法更多的是摆弄模板生成的html。

我还尝试创建一个绑定处理程序，用于在每次调用时更新进度条：

            ko.bindingHandlers.updateProgressBar = {
                init: function (element, valueAccessor) {
                    viewModel.updateProgressBar();
                }
            };

...

<ul data-bind="template: {name: 'genericItemTemplate', foreach: ChildItems},  updateProgressBar: true"></ul>

不幸的是，尽管每次都会调用该方法，但是在模板完全渲染完成之前UI不会更新，因此我无法获得正在寻找的正在运行的进度。

我正在使用tmpl模板库。

如何通过observableArray中大量项目的模板进度来显示更新UI？

Answer 1

一种选择是将您的初始数据放入一个单独的数组中，然后将其用作队列。你可以从temp数组中拼接“x”个项目，然后在setTimeout中将它们推送到真正的observableArray。

然后，您可以使用dependentObservable跟踪完成百分比。

以下是一个示例：http://jsfiddle.net/rniemeyer/fdSUU/

Answer 2

我只是把那个小提琴分开并添加一些风格来制作一个功能齐全的进度条，检查一下：http://jsfiddle.net/Pegazux/h3UuG/