淘汰赛渲染视图时显示进度条答案

【问题标题】：Show progress bar while knockout is rendering the view淘汰赛渲染视图时显示进度条
【发布时间】：2012-01-03 21:21:38
【问题描述】：

我有一个复杂的页面，它使用敲除通过模板呈现内容。渲染大约需要 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？

【问题讨论】：

标签： knockout.js jquery-templates

【解决方案1】：

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

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

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

【讨论】：

谢谢瑞恩。你像往常一样搞定了。
@RP Niemeyer - 如果将数据保存到服务器，有什么方法可以实现类似的功能吗？

【解决方案2】：

我刚刚 fork 那个小提琴并添加了一些样式来制作一个功能齐全的进度条，检查一下：http://jsfiddle.net/Pegazux/h3UuG/

【讨论】：