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

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模板库.

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

Answer 1

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

然后,您可以使用dependentObservable跟踪完成百分比.

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