Nakavt görüntüyü görüntülerken ilerleme çubuğunu göster

Question

İçeriği şablonlar aracılığıyla oluşturmak için nakavt kullanan karmaşık bir sayfam var. Bu işlemin gerçekleşmesi yaklaşık 10 saniye sürüyor, bu durumda bir ilerleme çubuğu göstermek istiyorum. Şablonda, sayfayı bozan afterRender yöntemine bir geri arama eklemeyi denedim - bu yöntemin, şablon tarafından oluşturulan html ile uğraşmaktan daha fazlası olduğunu düşünüyorum.

Ben de her çağrıda ilerleme çubuğunu güncelleyen bir bağlayıcı işleyicisi oluşturma denedim

:

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

...

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

Maalesef yöntem her zaman denilen olsun her ne kadar, Şablonlar tamamen oluşturmayı tamamlayana kadar kullanıcı arayüzü güncellenmez, bu yüzden aradığım ilerlemeyi alamıyorum.

Tmpl şablon kitaplığı kullanıyorum.

UI'yi, bir gözlemlenebilir Array öğesindeki geniş bir öğe koleksiyonundan geçen şablonun ilerlemesiyle güncelleştirmeyi nasıl görüntüleyebilirim?

Answer 1

İlk seçenek, başlangıç ​​verilerinizi başlangıç ​​olarak ayrı bir diziye yerleştirip sonra sıra olarak kullanmaktır. Temp dizisinden öğelerin sayısını "x" ekler ve bunları setTimeout içinde gerçek gözlemlenebilir Dizinize eklersiniz.

Daha sonra, tamamlanmış yüzdeyi izlemek için bir bağımlılık kullanamazsınız. İşte

bir örnek: http://jsfiddle.net/rniemeyer/fdSUU/

Answer 2

sadece o keman çatal ve tam fonksiyonel ilerleme çubuğu yapmak için biraz stil eklemek ettik kontrol: http://jsfiddle.net/Pegazux/h3UuG/