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实现启动画面/加载启动画面

回答

相关问题