剔除渲染视图时显示进度条 [英] Show progress bar while knockout is rendering the view

问题描述

我有一个复杂的页面，该页面使用剔除法通过模板呈现内容.渲染大约需要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?

解决方案

一种选择是将您的初始数据放入一个单独的数组开始，然后将其用作队列.您将从临时数组中拼接"x"个项目，然后在setTimeout中将它们推入实际的observableArray中.

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

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

I have a complex page that uses knockout to render the contents via templates. It takes around 10 seconds to render so I want to show a progress bar while this happens. I have tried to add a callback in the template to the afterRender method which broke the page - I think this method is more to do with fiddling with the html generated by the template.

I have also tried creating a binding handler that updates the progress bar on every call:

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

...

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

Unfortunately, although the method does get called each time, the UI does not get updated until the templates have completely finished rendering so I don't get the running progress that I am looking for.

I am using tmpl template library.

How can I display update the UI with progress of the template working its way through a large collection of items in an observableArray??

解决方案

One choice is to place your initial data into a separate array to start with and then use it as a queue. You would splice "x" number of items from the temp array and push them to your real observableArray in a setTimeout.

You can then use a dependentObservable to track the percent complete.

Here is a sample: http://jsfiddle.net/rniemeyer/fdSUU/

这篇关于剔除渲染视图时显示进度条的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！