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

Posted 2021-05-06

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

调度afterRender不起作用，因为页面还没有“加载”（现在它只是在下一页加载时只停留在前一页几秒钟;使用afterRender导致同样的事情，但是一旦它加载你得到加载div在淡出之前的简要概述：显然不是预期的行为）。

如何显示加载模板呢？

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

编辑：我确实认为我的问题与建议重复的问题不同，因为我想为所有路由提供相同的加载模板，默认加载模板结构不提供。 “遗留”LoadingRoute解决方案不再适用，因为最新版本的Ember不赞成使用Views。

答案

根据我的理解，Ember.js loading substates正是您所需要的，特别是本指南的这一部分：

应用程序/ router.js

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

Ember会交替尝试在层次结构中找到routeName-loading或加载模板，从第一个模板开始：

• foo.bar.slow模型加载
• foo.bar.loading或foo.bar-loading
• foo.loading或foo-loading
• 加载或应用程序加载（您已经实现）

我建议您删除afterRender（），因为我不知道它是否会干扰触发加​​载事件。如果指南不提供解决方案，您可以发布一个jsfiddle吗？根据你如何实施网点，Ember.js会变得挑剔...

你可以分叉我为另一个问题创建的example来快速设置你的JSFiddle以使用Ember.js