Mostrar la barra de progreso mientras el knockout representa la vista

Question

Tengo una página compleja que utiliza el knockout para representar los contenidos mediante plantillas. Se tarda unos 10 segundos en renderizar, así que quiero mostrar una barra de progreso mientras esto sucede. He intentado agregar una devolución de llamada en la plantilla al método afterRender que rompió la página. Creo que este método tiene más que ver con tocar el html generado por la plantilla.

También he intentado crear un manejador de unión que se actualiza la barra de progreso en cada llamada:

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

...

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

Por desgracia, aunque el método se consiga llamar cada vez, el La interfaz de usuario no se actualiza hasta que las plantillas terminen de renderizarse por completo, por lo que no obtengo el progreso de ejecución que estoy buscando.

Estoy usando la biblioteca de plantillas tmpl.

¿Cómo puedo ver la actualización de la interfaz de usuario con el progreso de la plantilla trabajando a través de una gran colección de elementos en una matriz observable?

Answer 1

Una opción es colocar sus datos iniciales en una matriz separada para comenzar y luego usarlos como una cola. Debería empalmar "x" número de elementos de la matriz temporal e insertarlos en su Array real observable en un setTimeout.

A continuación, puede utilizar un dependienteObservable para rastrear el porcentaje completado.

Este es un ejemplo: http://jsfiddle.net/rniemeyer/fdSUU/

Answer 2

acabo de tenedor que el violín y añadir un poco de estilo para hacer una barra de progreso completamente funcional, lo comprueba: http://jsfiddle.net/Pegazux/h3UuG/