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

Question

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

调度 afterRender 不起作用，因为页面还没有“加载”(现在它只是在上一页停留几秒钟，因为下一页加载；使用 afterRender 会导致同样的事情，但是一旦它加载你就会在它淡出之前短暂地瞥见加载 div:显然不是预期的行为)。

如何显示加载模板？

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

编辑:我确实相信我的问题与建议的重复问题不同，因为我想为所有路由使用相同的加载模板，默认加载模板结构不提供。 “旧版”LoadingRoute 解决方案无法再工作，因为 Views 已被最新版本的 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 将交替尝试在层次结构中从第一个模板开始查找路由名称加载或加载模板:

• foo.bar.slow-model-loading

• foo.bar.loading 或 foo.bar-loading

• foo.loading 或 foo-loading

• loading 或 application-loading(您已经实现)

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

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