剔除渲染视图时显示进度条 [英] 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屋!