Показать индикатор выполнения, когда нокаут рендерит вид

Question

У меня есть сложная страница, которая использует нокаут для рендеринга содержимого с помощью шаблонов. Рендеринг занимает около 10 секунд, поэтому я хочу показать индикатор выполнения, пока это происходит. Я попытался добавить обратный вызов в шаблоне к методу afterRender, который сломал страницу - я думаю, что этот метод больше связан с изменением HTML-кода, сгенерированного шаблоном.

Я также попытался создать обработчик привязки, который обновляет индикатор выполнения при каждом вызове:

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

...

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

К сожалению, хотя метод вызывается каждый раз, пользовательский интерфейс не обновляется до тех пор, пока шаблоны не полностью завершат рендеринг, поэтому я не получаю требуемый ход выполнения.

Я использую библиотеку шаблонов tmpl.

Как отобразить обновление пользовательского интерфейса в процессе работы шаблона, проходящего через большую коллекцию элементов в observableArray ??

Answer 1

Один из вариантов - поместить исходные данные в отдельный массив для начала, а затем использовать их в качестве очереди. Вы бы склеили число элементов «x» из временного массива и поместили бы их в ваш реальный observableArray в setTimeout.

Затем можно использовать зависимый наблюдатель, чтобы отслеживать процент выполнения.

Вот пример: http://jsfiddle.net/rniemeyer/fdSUU/

Answer 2

Я только что раскошелился на скрипке и добавил стиль, чтобы сделать полнофункциональный индикатор выполнения, отметьте его: http://jsfiddle.net/Pegazux/h3UuG/