在数据加载时显示进度条 [英] show progressbar while data is loading Knockoutjs

问题描述

在集成JqueryUI的加载进度栏以从KO的Observable数组加载数据时，我需要一些帮助.我创建了一些JsFiddles

fiddle for KnockOut : http://jsfiddle.net/neodescorpio/HksCA/

fiddle for JqueryUI Progress bar : http://jsfiddle.net/neodescorpio/NAs3V/

我需要将这两种方法结合起来，以便在加载敲除后显示带有百分比的进度条，并且在100％加载数据后消失.如果使用了其他进度条，那就可以了.我只希望显示进度.

解决方案

您应该进行自定义绑定，以从敲除绑定中操纵jQuery进度栏.例如类似的东西(非常人为的例子):

ko.bindingHandlers.progress = {
   init: function(element, valueAccessor) {
      $(element).progressbar({
         value: 0
      });
   },
   update: function(element, valueAccessor) {
      var val = ko.utils.unwrapObservable(valueAccessor());
      $(element).progressbar("value", parseFloat(val));
   }
};

现在，您可以使用 progress

从div创建一个进度条，并通过一个可观察的值(应返回一个数字，或代表一个数字的字符串，范围从1到100)来命令它. em>绑定-例如:

<div data-bind="progress: percentComplete"></div>

我将更新您的小提琴以显示示例: http://jsfiddle.net/HksCA/2/

I need some help in integrating a loading progress bar of JqueryUI to loading of data from a Observable array of KO. I have created some JsFiddles

fiddle for KnockOut : http://jsfiddle.net/neodescorpio/HksCA/

fiddle for JqueryUI Progress bar : http://jsfiddle.net/neodescorpio/NAs3V/

I need to combine both of these so that on loading of knock out a progress bar with percentage is shown and disappears after data is loaded 100%. If any other progressbar is used im okay with it. i just want a progress to be shown.

解决方案

You should make a custom binding to manipulate the jQuery progress bar from knockout bindings. For example something like that (very contrived example):

ko.bindingHandlers.progress = {
   init: function(element, valueAccessor) {
      $(element).progressbar({
         value: 0
      });
   },
   update: function(element, valueAccessor) {
      var val = ko.utils.unwrapObservable(valueAccessor());
      $(element).progressbar("value", parseFloat(val));
   }
};

Now you can create a progress bar from a div and command it through an observable value (which should return a number, or a string representing a number, ranging from 1 to 100), by using the progress binding - e.g.:

<div data-bind="progress: percentComplete"></div>

I update your fiddle to show an example: http://jsfiddle.net/HksCA/2/

这篇关于在数据加载时显示进度条的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！