Hiển thị thanh tiến trình trong khi loại trực tiếp đang hiển thị chế độ xem

Question

Tôi có trang phức tạp sử dụng loại trực tiếp để hiển thị nội dung thông qua mẫu. Mất khoảng 10 giây để hiển thị vì vậy tôi muốn hiển thị thanh tiến trình trong khi điều này xảy ra. Tôi đã cố gắng thêm một cuộc gọi lại trong mẫu vào phương pháp afterRender đã phá vỡ trang - Tôi nghĩ rằng phương pháp này là nhiều hơn để làm với fiddling với html được tạo ra bởi các mẫu.

Tôi cũng đã cố gắng tạo ra một handler ràng buộc đó cập nhật các thanh tiến trình trên mỗi cuộc gọi:

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

...

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

Thật không may, mặc dù phương pháp này không được gọi mỗi thời gian, Giao diện người dùng không được cập nhật cho đến khi các mẫu hoàn tất hiển thị xong nên tôi không nhận được tiến trình đang chạy mà tôi đang tìm kiếm.

Tôi đang sử dụng thư viện mẫu tmpl.

Tôi làm cách nào để hiển thị cập nhật giao diện người dùng với tiến trình của mẫu đang hoạt động thông qua một tập hợp lớn các mục trong một ObservableArray ??

Answer 1

Một lựa chọn là đặt dữ liệu ban đầu của bạn vào một mảng riêng biệt để bắt đầu và sau đó sử dụng nó làm hàng đợi. Bạn sẽ ghép "x" số lượng các mục từ mảng temp và đẩy chúng vào ObservableArray thực của bạn trong một setTimeout.

Sau đó, bạn có thể sử dụng một người phụ thuộcKhả thể theo dõi để theo dõi phần trăm hoàn tất.

Đây là một mẫu: http://jsfiddle.net/rniemeyer/fdSUU/

Answer 2

Tôi vừa mới ngã ba fiddle đó và thêm một số phong cách để thực hiện một thanh tiến trình đầy đủ chức năng, kiểm tra xem nó: http://jsfiddle.net/Pegazux/h3UuG/