Ember JS實現啓動畫面/加載啓動畫面

在Ember 2.5中實現加載畫面的最佳方式是什麼？我想要實現的是：顯示啓動畫面 - >在後臺加載數據 - >當DOM準備好時，隱藏啓動畫面。Ember JS實現啓動畫面/加載啓動畫面

我嘗試了幾個選項，但是我無法在文檔準備就緒時隱藏啓動畫面。我正在加載一個大型表格，所以完成DOM需要一些時間，因此模型就緒並不是正確的方法。

2016-06-21 Lopo

我這樣做是通過添加自定義HTML（簡單的加載DIV）到應用程序/ index.html的：

<body> 
    <div class="loading-overlay" id="initialLoading"></div> 

    {{content-for "body"}} 

    <script src="assets/vendor.js"></script> 
    <script src="assets/event.js"></script> 

    {{content-for "body-footer"}} 
</body>

然後添加以下到我的應用程序/應用/ route.js：

actions: { 
    loading(transition/* , originRoute*/) { 
    let controller = this.get('controller'); 
    if(controller) { 
     controller.set('currentlyLoading', true); 
    } 
    transition.promise.finally(function() { 
     $("#initialLoading").remove(); 
     if(controller) { 
     controller.set('currentlyLoading', false); 
     } 
    }); 
    } 
}

在我的應用程序/應用/ template.hbs我還必須添加加載DIV：

{{#if currentlyLoading}} 
    <div class="loading-overlay"></div> 
{{/if}}

那麼，是什麼情況？

index.html被加載，並且還沒有解析JavaScript：您的加載屏幕是可見的。
index.html被加載並且您的javascript已被解析。 ember.js調用加載操作並將當前加載設置爲true：顯示兩個加載屏幕。
轉換完成後，第一個加載和第二個加載屏幕被刪除
對於正在發生的每個轉換，將顯示加載屏幕。要消除這種行爲，請刪除第二個加載屏幕邏輯。

我希望它有幫助。

來源

2016-06-21 09:57:34 Timm

謝謝，完美無缺！以下是關於此的一些文檔：https：//guides.emberjs.com/v2.5.0/routing/loading-and-error-substates/ – Lopo

Ember JS實現啓動畫面/加載啓動畫面

回答

相關問題