在敲除渲染视图时显示进度条

Question

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

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

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

...

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

不幸的是，尽管该方法不是每次被调用时，用户界面不会得到更新，直到模板已经完成渲染，所以我没有得到我正在寻找的正在运行的进度。

我正在使用tmpl模板库。

我该如何显示更新UI的进展，模板的工作方式是通过一个observableArray中的大量项目集？

Answer 1

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

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

这里有一个例子：http://jsfiddle.net/rniemeyer/fdSUU/

Answer 2

我刚刚叉是小提琴和添加一些风格做一个全功能的进度条，检查：http://jsfiddle.net/Pegazux/h3UuG/