Ember JS 实现启动画面/加载启动画面

Question

在 Ember 2.5 中实现加载屏幕的最佳方法是什么？我想要实现的是：显示启动画面 -> 在后台加载数据 -> 当 DOM 准备就绪时，隐藏启动画面。

我尝试了几个选项，但我无法实现在文档准备好时隐藏启动画面。我正在加载一个大的table，所以需要一些时间来完成DOM，所以model-ready不是正确的钩子。

Answer 1

我通过将自定义 HTML（简单加载 div）添加到 app/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>

然后我将以下内容添加到我的 app/application/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);
      }
    });
  }
}

在我的 app/application/template.hbs 中我还必须添加加载 div:

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

那么会发生什么？

index.html 已加载，但尚未解析 javascript：您的加载屏幕可见。
index.html 已加载，您的 javascript 已被解析。 ember.js 调用加载操作并将 currentlyLoading 设置为 true：显示两个加载屏幕。
转换完成，第一个加载和第二个加载屏幕被移除
对于现在发生的每个转换，都会显示加载屏幕。要删除此行为，请删除第二个加载屏幕逻辑。

希望对您有所帮助。

Ember JS 实现启动画面/加载启动画面

Ember JS Implement a splash screen / loading startup screen

ember.js

ember-data

ember-cli