如何在加载模型时在 Ember 中显示加载模板？

Question

我想在 Ember 中呈现加载模板，然后再加载下一个模板。现在我有一个应用程序路径的加载模板，如果用户直接导航到 URL，它就可以正常工作。但是，如果用户从应用程序的另一个页面中单击 link-to 进入该页面，我希望显示相同的模板。如何才能做到这一点？

计划 afterRender 不起作用，因为页面还没有 "loaded"（现在它只是在下一页加载时在上一页停留几秒钟；使用 afterRender导致同样的事情，但是一旦它加载你就会在它淡出之前短暂地瞥见加载 div ：显然不是预期的行为）。

如何显示加载模板？

减少加载时间不是一个选项，我们做了一些相当繁重的计算。

编辑：我确实相信我的问题与建议的重复问题不同，因为我想为所有路由使用相同的加载模板，这是默认加载模板结构不提供。 "legacy" LoadingRoute 解决方案无法再工作，因为视图已被最新版本的 Ember 弃用。

Answer 1

据我了解，Ember.js loading substates 正是您所需要的，尤其是指南的这一部分：

app/router.js

Router.map(function() {
  this.route('foo', function() {
    this.route('bar', function() {
      this.route('slow-model');
    });
  });
});

Ember 将交替尝试在从第一个模板开始的层次结构中查找路由名称加载或加载模板：

我建议您删除 afterRender()，因为我不知道它是否会干扰触发加载事件。如果指南没有提供解决方案，您可以 post 一个 jsfiddle 吗？ Ember.js 可能会变得很挑剔，具体取决于您实施渠道的方式...

您可以 fork 我为另一个问题创建的 example 以快速设置您的 JSFiddle 以使用 Ember.js

How to display a loading template in Ember while model is being loaded?