在淘汰赛渲染视图时显示进度条 [英] Show progress bar while knockout is rendering the view

问题描述

我有一个复杂的页面，它使用敲除通过模板呈现内容.渲染大约需要 10 秒，所以我想在发生这种情况时显示一个进度条.我试图在模板中添加一个回调到破坏页面的 afterRender 方法 - 我认为这个方法更多地与摆弄模板生成的 html 有关.

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

 ko.bindingHandlers.updateProgressBar = {初始化:函数(元素，valueAccessor){viewModel.updateProgressBar();}};

...

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

不幸的是，虽然每次都会调用该方法，但在模板完全完成渲染之前 UI 不会更新，因此我没有得到我正在寻找的运行进度.

我正在使用 tmpl 模板库.

如何显示更新 UI 与模板在 observableArray 中的大量项目集合中工作的进度?

解决方案

一种选择是将初始数据放入一个单独的数组中，然后将其用作队列.您将从临时数组中拼接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屋！