Màn hình giật gân Durandal khi làm việc với các lời hứa

Question

SPA dựa trên durandal của tôi thực hiện các cuộc gọi async aync khác nhau trong chức năng kích hoạt của chế độ xem. Tôi đang trả lời lời hứa bằng cách sử dụng Q từ chức năng kích hoạt.

function activate(){ 
     return Q.fcall(['getPersons', 'getAgenda']); 
} 

function getPersons(){ 
     var defer = Q.defer(); 
     $.ajax({ 
     //omitting most of the settings 
     success: function(data){ 
       defer.resolve(data); 
     }, 
     error: function(xhr, status){ 
       defer.reject(status); 
     } 
     }); 

    return defer.promise; 
} 

Mã tương tự cũng tồn tại trong hàm getAgenda. Tất cả điều này hoạt động tốt và chuyển tiếp màn hình của tôi. Vấn đề là, getAgenda của tôi mất một thời gian (2 đến 3 giây). Màn hình giật gân không xuất hiện, màn hình vẫn ở vị trí trong 2 hoặc 3 giây trước khi chuyển đổi.

Màn hình giật gân của tôi rất đơn giản và hiển thị lần đầu tiên trang web tải. Bất kỳ ý tưởng?

Answer 1

Giả sử màn hình giật gân của bạn trông giống như http://durandaljs.com/documentation/Adding-a-Splash-Screen, thì điều này có nghĩa là màn hình giật gân một lần bị ghi đè trong app.start.

<div id="applicationHost"> 
    <div class="splash"> 
     <div class="message"> 
      Durandal Starter Kit 
     </div> 
     <i class="icon-spinner icon-2x icon-spin active"></i> 
    </div> 
</div> 

Có thể bạn đang tìm kiếm một loại chỉ báo tải. Ví dụ: trong ví dụ mẫu này được triển khai dựa trên router.isNavigating, vì vậy, trong vm bạn hãy tạo tương tự isLoading quan sát được, mà bạn đặt thành true trước cuộc gọi không đồng bộ và thành sai khi hoàn tất.

https://github.com/dFiddle/dFiddle-1.2/blob/gh-pages/App/samples/shell.html#L13

<div class="loader pull-right" data-bind="css: { active: router.isNavigating }"> 
    <i class="icon-spinner icon-2x icon-spin"></i> 
</div> 

Answer 2

tôi muốn tích hợp Pacejs vào menu Durandal, và nó đã kết thúc nhờ khá dễ dàng để router.isNavigating

Dưới đây là các ý chính https://gist.github.com/volak/4aca442373b4216a52b5